无法使用 Gatsby 和 Typescript 从 gatsby-config.js 文件中读取 siteMetadata 对象

Question

我正在尝试读取我在 gatsby-config.js 文件中定义的 siteMetadata 对象的内容，但每次尝试都会收到此错误

ERROR in ./src/pages/index.tsx
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
TypeError: Cannot read property 'type' of null
    at VariableDeclarator (/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/babel-plugin-remove-graphql-queries/index.js:277:81)
    at NodePath._call
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitMultiple
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/context.js:85:17)
    at TraversalContext.visit
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/context.js:144:19)
    at Function.traverse.node
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/index.js:94:17)
    at NodePath.visit
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:95:18)
    at TraversalContext.visitQueue
ℹ ｢wdm｣: Failed to compile.

我正在使用带有打字稿的 Gatsby。我在gatsby-config.js 上安装了插件gatsby-plugin-ts-loader 和所需的设置。我正在尝试在我的项目的起始页中读取 siteMetadata 对象。我尝试使用来自gatsby 库的graphql 和useStaticQuery，但它失败了。这是我如何进行的

  const data = useStaticQuery(graphql`
    query IndexQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

这是我在 gatsby-config.js 中定义 SiteMetada 对象的方式

  siteMetadata: {
    title: 'Saturn web',
    author: 'FunctionalStack',
    description: 'Gatsby with typscript',
    siteUrl: 'http://localhost :8000/'
  }

如果我删除所有读取站点元数据的查询，应用程序将正常运行。我在适用于 Linux 的 Windows 子系统上使用 gatsby - Ubuntu 18.04.1

Answer 1

当我在你的根目录中运行 tsc -p . 并检查输出时，我发现 tsc 编译了这个：

  const data = useStaticQuery(graphql`
    query IndexQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

进入这个：

var data = useStaticQuery(graphql(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    query IndexQuery {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  "], ["\n    query IndexQuery {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  "]))));

Gatsby 期望 graphql 查询在模板文字中，但 tsc 将它们编译为常规函数。

要解决此问题，您需要将tsconfig 更改为至少输出es6。

// tsconfig.json
{
  compileOptions: {
    "module": "esnext",
    "target": "esnext", <-- or es6 & above
  }
}

---

顺便说一句，我最近为 gatsby 发布了一个 ts 插件，旨在使在 typescript 中使用 gatsby 尽可能流畅。它所做的不同事情之一是为 graphql 查询自动生成类型。如果您试一试，如果有任何问题，我将不胜感激：

• gatsby-plugin-ts
• starter repo