标签: gridsome

我有一个使用 GraphQL 后端运行的 Vue.js 应用程序，以及作为 Vue.js 样板生成器的 Gridsome。

我正在尝试编写一个 GraphQL 查询以仅返回登录用户的数据，如下所示：

query Blah($test: String!) {
  db {
  settings (where: {user_id: {_eq: $test}})
  {
    key
    value
  }
}

在这里定义了 $test 变量：

export default {
    data() {
        return {
            test: "Va123",
            user: null
        };
    }
}

但我收到此错误消息：

An error occurred while executing query for src/pages/Profile.vue

Error: Variable "$test" of required type "String!" was not provided.

这是用于 Girdsome页面，而不是模板

我即将部署一个静态的 Gridsome 网站。目前，整个站点在 gzip 压缩之前重 518KB（带有自托管、彻底子集化的字体、缩小的内联 SVG 等）。我知道这已经不是有史以来最庞大的网站，然而。

运行 Chrome 的代码覆盖工具，以及 88561 字节的 app.js（总共 181166 字节）未使用。这几乎是文件的 50%。那是……很多。

除了 Gridsome 之外，我没有任何依赖项，而且我自己的 JavaScript 代码很轻。所以我假设大部分权重来自 Vue.js 或 Gridsome。Gridsome 已经在后面使用了 Webpack 4，所以我认为它做了很多剥离，但我仍然很烦恼。

有什么我可以做的，或者这只是不可避免的？我是否需要编写整个香草来绕过这种膨胀？

提前致谢 ：）

我是 Gridsome 和 GraphQL 的新手。但是我没有在这个项目中使用 GraphQL。我只有一个 Gridsome 项目设置和一些 JSON 数据，我正在尝试全局定义它，以便我可以从我的所有 Vue 页面和组件访问它。（我知道它可以导入到组件中，但我正在寻找更多的“Gridsome 方式”来做到这一点）。我已经完成了以下步骤来实现这一目标：

1) 为 Json 文件创建一个文件夹：data/myJson.json. json文件：

{
    "startPage": {
        "title": "Welcher Typ bist Du?",
        "subtitle": "Los geht's beim lustigen Datev-Quiz!",
        "startButton": "Quiz starten"
    }
}

2）我gridsome.server.js的看起来像这样：

var myJson = require('./data/questions.json');
module.exports = function (api) {
  api.loadSource(store => {
    const startPage = store.addContentType({
      typeName: 'StartPage'
    });

    startPage.addNode({
      title: 'StartPageInfo',
      fields: {
        title: myJson.startPage.title,
        subtitle: myJson.startPage.subtitle,
        startButton: myJson.startPage.startButton
      }
    })
  })
}

3）我在index.vue页面中查询这些数据。

我可以在我的模板中访问这些数据。所以如果我做这样的事情 …

Gridsome/Gatsby 用例：仅 CMS？

我读到 Gridsome/Gatsby 与 CMS 配合得很好，但我从来没有对 CMS 做任何事情，这就是为什么我个人无法与这种优势联系起来。这是最好使用 Gridsome/Gatsby 的唯一情况吗？

静态站点生成和预取

都可以做静态站点生成和预取。行为上有什么不同吗？

灵活性

基本上使用 Nuxt/Next，我可以灵活地做我想做的事情，并在我积极开发的同时轻松更改构建行为（SSR 或静态站点生成）。另一方面，Gridsome/Gatsby 没有提供灵活性。或者是吗？

时间投资

此外，考虑到时间，学习两个框架 - 好吧 - 非常耗时。因此，Nuxt/Next 将使我涵盖更广泛的用例，并且更值得学习。至少根据我目前的知识，我是这么认为的。

当前的个人用例

在我的特定情况下，我想创建一个登录页面。理论上，从阅读文章来看，Gatsby/Gridsome听起来更合适。但是从功能上看，与 Gridsome/Gatsby 相比，Nuxt/Next 可以做到完全相同而没有任何缺点。

我对 plugin-google-analytics https://github.com/gridsome/gridsome/blob/master/packages/plugin-google-analytics/README.md有问题

当我将我的 Google Analytics 跟踪 ID 放在 gridsome.config.js 中时，它在 Google Analytics 平台上什么也不做。两天后一样。我将所有文件上传到服务器上，但从未出现过.. 我错过了什么？

module.exports = {
siteName: 'massivemedias',
plugins: [
{
  use: '@gridsome/plugin-google-analytics',
  options: {
    id: 'G-NNQ12FXXX' //my tracking id
  }
}
]
}

日历小部件首先可以工作，但是如果您刷新页面，它就会停止工作，但只有在网站上线时才会停止工作。在本地开发中，不会出现这样的问题。

还注意到，当我通过导航路由到该页面时，它可以工作。但如果我直接输入特定页面的链接，则不起作用。

这是代码：

    <template>
  <client-only>
    <vue-calendly url="link" :height="650"></vue-calendly>
  </client-only>
</template>

<script>
import Vue from 'vue';

export default {
  created() {
    if (process.isClient) {
      const VueCalendly = require('vue-calendly').default;
      Vue.use(VueCalendly);
    }
  }
};
</script>

Vue 应用程序在 Gridsome 上运行，因此它是 SSR。我将小部件设置为仅在客户端显示。不确定是什么问题。