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

Posted 2023-03-08

【中文标题】如何为 TypeScript 配置 `*.graphql` 导入？

【英文标题】：How to configure `*.graphql` imports for TypeScript?

【发布时间】：2021-12-23 03:58:48

【问题描述】：

我想发布一个包，其中包含*.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.

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

【问题讨论】：

能否请您包含您的消费者项目的 tsconfig 文件以及消费者项目中使用的任何三斜杠指令？首先想到的是您可能没有在 tsconfig 中包含库类型（或正确包含），但问题可能更深。一个最小的可重现示例会很好，因为许多因素都可能导致这种行为。

我总是很惊讶人们如何在问题上提出赏金，然后却没有出现在后续行动中。这种情况经常发生！

【参考方案1】：

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

A

）关于如何生成/模块化graphql queries &

B

）如何fix 那些用于打字稿的compiler errors 你正在拥有。

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

---

答案 A：

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

1) 内置GraphQl Generator， 2) 使用 config webpack/loader 实现更简单的自定义操作 3) 使用GraphQl Fragments Ref.，然后使用片段您可以像GraphQl Fragments Sample 那样组件化它们

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

A.在这里查看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 更简单，例如

---

简单的形式，我建议使用webpack loader 来喂你的webpack config apollo

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

在您的 queries.graphql 中避免使用双引号和特殊字符

query GetAllRoles($value: String) 
 Role(filter:  role: $value ) 
    role
 

现在，您可以在查询值中重复使用它

import GetAllRoles from './queries.graphql'
 .....
 this.apollo.query(
  query: GetAllRoles,
  variables: 
    value: GetAllRoles, 
  
)
  .subscribe(....)

---

更多关于模块创建的示例和详细信息，resolvers here 可以帮助您

---

答案 B：

修复你面临的Typescript compiler errors

首先，graphql 的 typescript definitions/类型是 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 中添加此内容，以防止 typescript 编译器将模块类型应用于导入的 javascript。

// in your tsconfig.json

  "compilerOptions": 
    ...
  "allowJs": true,
  "checkJs": false,
    ...