如何在 Gatsbyjs 中正确设置和查询 siteMetadata?

Web*_*nce 5 graphql gatsby

我遇到的问题是,当我在 gatsby-config.js 文件中设置键值对时,我看不到 GraphiQL 中的数据。我正在遵循文档并使用示例代码中使用的密钥。有关文档,请参见此处:https : //www.gatsbyjs.org/docs/gatsby-config/#sitemetadata

这是我的gatsby-config.js文件:

module.exports = {
  siteMetadata: {
    title: `My Photography Site`,
    description: `Just the best`,
  },
  plugins: [
    `gatsby-plugin-emotion`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
Run Code Online (Sandbox Code Playgroud)

这是我的 GraphiQL 查询(在重新启动开发服务器以重新加载 gatsby-config.js 文件后):

query SiteQuery {
  site {
    siteMetadata {
      title
      description
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

GraphiQL 的预期结果:

{
  "data": {
    "site": {
      "siteMetadata": {
        "title": "My Photography Site",
        "description": "Just the best"
      }
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

这是GraphiQL的实际结果:

{
  "errors": [
    {
      "message": "Cannot query field \"description\" on type \"SiteSiteMetadata\".",
      "locations": [
        {
          "line": 5,
          "column": 7
        }
      ],
      "stack": [
        "GraphQLError: Cannot query field \"description\" on type \"SiteSiteMetadata\".",
        "    at Object.Field (/mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:64:31)",
        "    at Object.enter (/mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/graphql/language/visitor.js:334:29)",
        "    at Object.enter (/mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/graphql/language/visitor.js:385:25)",
        "    at visit (/mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/graphql/language/visitor.js:252:26)",
        "    at validate (/mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/graphql/validation/validate.js:63:22)",
        "    at /mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/express-graphql/dist/index.js:154:52",
        "    at processTicksAndRejections (internal/process/task_queues.js:89:5)"
      ]
    }
  ]
}
Run Code Online (Sandbox Code Playgroud)

奇怪的是,我之前能够成功创建自定义键值对,并且运行良好。我有一个键tagLine和一个值Panda Site。普通title键也能用。

以下是我使用的软件版本:

  • 盖茨比:2.5.12
  • 节点:v12.1.0
  • npm:6.9.0

我正在使用适用于 Linux 的 Windows 子系统 (WSL) 运行。如果您想要任何其他配置文件,包括 package.json,请告诉我。