如何将 graphql 文件导入打字稿？

Question

我想导入 graphql 文件，但出现错误

从“./schema/schema.graphql”导入 typeDefs；

10 import typeDefs from "./schema/schema.graphql";
                        ~~~~~~~~~~~~~~~~~~~~~~~~~

    at createTSError (C:\Users\darkc\Desktop\New folder (2)\server\node_modules\ts-node\src\index.ts:750:12)
    at reportTSError (C:\Users\darkc\Desktop\New folder (2)\server\node_modules\ts-node\src\index.ts:754:19)
    at getOutput (C:\Users\darkc\Desktop\New folder (2)\server\node_modules\ts-node\src\index.ts:941:36)

如何将 graphql 文件导入 typescript ？

Answer 1

您需要告诉 TypeScript.graphql文件是什么，以便导入正常进行。这不是 TypeScript 中支持 OOTB 的文件类型。为此，请创建一个类型定义文件，例如graphql.d.ts在您的项目中。该文件应包含以下声明或类似内容：

declare module '*.graphql' {
  import { DocumentNode } from 'graphql'
  const Schema: DocumentNode

  export = Schema
}

就我个人而言，我更喜欢简写扩展名*.gql. 为此，只需更改declare module表达式中的字符串值即可。

最后，您需要告诉 TypeScript 将您的自定义类型定义包含在 TypeScript 配置tsconfig.json文件中：

declare module '*.graphql' {
  import { DocumentNode } from 'graphql'
  const Schema: DocumentNode

  export = Schema
}

作为记录，我从以下文章中提取了这个答案：https://dev.to/open-graphql/how-to-resolve-import-for-the-graphql-file-with-typescript-and-webpack-35lf。但您会发现大多数解决方案都有效地涉及相同的步骤。