typescript - 如何为 TypeScript 配置 `*.graphql` 导入?
问题描述
我想发布一个包含*.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.
有没有办法配置项目,以便编译器可以看到这些类型?
解决方案
如果我理解正确,但是有两个问题/答案,即您缺少两件事
- A ) 关于如何生成/模块化
graphql queries
- & B ) 如何处理您所拥有
fix
的打字稿compiler errors
。
让我们开始吧,请考虑答案及其子选项...
答案A:
重用/模块化——为您的
GraphQl
查询生成/创建打字稿模块/组件,您可以使用 3 个选项,即
- 1 ) 内置的GraphQl 生成器,
- 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,简而言之..它允许您在文件中拥有一个名为 MyQuery 的查询
my-query.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';
选项 2 更简单,例如
简单的形式,我推荐使用apollowebpack loader
来提供你的webpack 配置
loaders: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader'
}
]
避免在您的查询中使用双引号和特殊字符。graphql
query GetAllRoles($value: String) {
Role(filter: { role: $value }) {
role
}
}
现在,您可以使用查询值重用它
import GetAllRoles from './queries.graphql'
.....
this.apollo.query({
query: GetAllRoles,
variables: {
value: GetAllRoles,
}
})
.subscribe(....)
有关模块创建和解析器的更多示例和详细信息,可在此处为您提供帮助
答案 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
,以防止 typescript 编译器将模块类型应用于导入的 javascript。
// in your tsconfig.json
{
"compilerOptions": {
...
"allowJs": true,
"checkJs": false,
...
}
}
推荐阅读
- java - 无法绕过 maven checkstyle 插件
- javascript - TinyMce 5 + Vue.js 使用插件添加按钮不起作用
- mongodb - MongoDB BI 连接器的 MongoDB ODBC 配置
- python - Django Rest Framwork 从视图返回序列化程序 create() 方法响应?
- java - Kotlin no-args 插件不适用于 Maven
- css - Laravel Jetstream 比较两个表格以更改表格的背景
- javascript - 输入字段的只读属性
- blazor - 在 Blazor (.razor) 组件中添加多个组件
- xml - 使用 XSLT 将包含 HTML 的 XML 部分转换为文本
- javascript - 带有数据验证的订阅按钮