如何为 TypeScript 配置“*.graphql”导入？

Question

我想发布一个包含“模块”类型声明的包*.graphql，并让项目使用该包，以便他们可以import为其他文件中编写的查询编写语句。这可能吗？

这是我到目前为止所拥有的。

我有以下类型，位于名为graphql.d.ts.

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

  export default defaultDocument;
}

而我的package.json长相是这样的。

{
  "name": "@my-private-scope/type-graphql-imports",
  "version": "1.0.0",
  "types": "graphql.d.ts",
  "files": [
    "graphql.d.ts"
  ],
  "peerDependencies": {
    "graphql": ">=14.0.0"
  }
}

但是在发布这个包并将其导入到不同的项目中后，出现以下错误。

error TS2307: Cannot find module './query.graphql' or its corresponding type declarations.

有没有办法配置项目以使这些类型对编译器可见？

Answer 1

如果我理解正确，但有两个问题/答案，即您缺少两件事

• A）关于如何生成/模块化graphql queries
• & B ) 如何处理您所拥有的fix打字稿。compiler errors

让我们开始，请考虑答案及其子选项......

答案A：

重用/模块化——为您的GraphQl查询生成/创建打字稿模块/组件，您可以使用 3 个选项，即

• 1）内置的GraphQl生成器，
• 2 ) 使用配置 webpack/loader 更简单地自行部署
• 3 ) 使用GraphQl Fragments Ref。，然后使用片段，您可以将它们组件化，如下所示GraphQl Fragments Sample

选项 1：有一个内置的生成器，您可以使用它与 webpack 结合来简化事情。

• 答：查看此处https://www.graphql-code-generator.com/docs/plugins/typescript-graphql-files-modules获取其参考。下面的示例..您可以设置类似此生成器的东西，然后它将生成 B 中列出的代码

generates: src/api/user-service/queries.d.ts
 documents: src/api/user-service/queries.graphql
 plugins:
   - typescript-graphql-files-modules
 config:
   # resulting module definition path glob: "*\/api/user-service/queries.graphql"
   modulePathPrefix: "/api/user-service/"

• B，简而言之......它允许您在my-query.graphql文件中进行名为 MyQuery 的查询，该模板将生成以下代码：

declare module '*/my-query.graphql' {
  import { DocumentNode } from 'graphql';
  const MyQuery: DocumentNode;

  export { MyQuery };

  export default defaultDocument;
}
Accordingly, you can import the generated types and use it in your code:

import myQuery from './my-query.graphql';

// OR

import { myQuery } from './my-query.graphql';

选项 2 更简单，例如

简单的形式，我建议使用apollowebpack loader来提供你的webpack 配置

generates: src/api/user-service/queries.d.ts
 documents: src/api/user-service/queries.graphql
 plugins:
   - typescript-graphql-files-modules
 config:
   # resulting module definition path glob: "*\/api/user-service/queries.graphql"
   modulePathPrefix: "/api/user-service/"

避免在查询中使用双引号和特殊字符。graphql

declare module '*/my-query.graphql' {
  import { DocumentNode } from 'graphql';
  const MyQuery: DocumentNode;

  export { MyQuery };

  export default defaultDocument;
}
Accordingly, you can import the generated types and use it in your code:

import myQuery from './my-query.graphql';

// OR

import { myQuery } from './my-query.graphql';

现在，您可以将其与查询值一起重用

loaders: [
  {
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: 'graphql-tag/loader'
  }
]

这里有一些有关模块创建和解析器的更多示例和详细信息，可以帮助您

答案B：

解决你面临的问题Typescript compiler errors

首先，typescript definitions/typesgraphql是missing，您必须手动配置/添加/扩展 Typescript 定义。

// in your webpack.d.ts
declare module "*.gql" {
  const content: any;
  export default content;
}

declare module "*.graphql" {
  const content: any;
  export default content;
}

其次，如果这不能解决问题，那么也请尝试将其添加到 中tsconfig.json，以防止打字稿编译器将模块类型应用于导入的 javascript。

// in your tsconfig.json
{
  "compilerOptions": {
    ...
  "allowJs": true,
  "checkJs": false,
    ...
  }
}