8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

在 Apollo 客户端查询中使用 GraphQL 文档

Agnel Selvan 1月前

13 0

我已经在 Typescript 中创建了一个 Rest API 应用程序,使用 NestJS 并使用 Apollo Client 查询 GraphQL 服务器。我目前对我的查询进行了硬编码,如下所示:const query = \'query { ex...

我已经在 Typescript 中创建了一个 Rest API 应用程序,使用 NestJS 并使用 Apollo Client 查询 GraphQL 服务器。

我目前的查询是硬编码的,如下所示:

const query = "query { example }";

this.apolloClient.query({
  query: gql`
    ${query}
  `,
});

但我想将这些查询移动到 .grapql 文件中并在查询中使用它们 DocumentNode .

例子.graphql

query {
  example
}
import example from "example.graphql";

this.apolloClient.query({
  query: example,
});

我能得到一些帮助吗,关于我需要做什么才能得到这个?

我尝试 graphql.d.ts 用如下代码创建一个文件:

declare module "*.graphql" {
  import { DocumentNode } from "graphql";
  const value: DocumentNode;
  export default value;
}

但我一直收到 Cannot find module "example.graphql" or its corresponding type declarations 错误。

import example from "example.graphql";
                    ~~~~~~~~~~~~~~~~~
帖子版权声明 1、本帖标题:在 Apollo 客户端查询中使用 GraphQL 文档
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Agnel Selvan在本站《typescript》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 您不应该导入 .grapql 文件,而是应该导入依赖于这些 .grapql 文件的自动生成的钩子。

    我将为你提供一些指导,但你必须将其运用到你的案例中。

    1)安装 GraphQL 和所需的软件包

    npm install @nestjs/graphql graphql-tools graphql apollo-server-express @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-resolvers

    2)在 NestJS 中配置 GraphQL 模块

    import { Module } from '@nestjs/common';
    import { GraphQLModule } from '@nestjs/graphql';
    import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
    import { join } from 'path';
    
    @Module({
      imports: [
        GraphQLModule.forRoot<ApolloDriverConfig>({
          driver: ApolloDriver,
          autoSchemaFile: join(process.cwd(), 'src/schema.gql'), // auto-generate schema file
        }),
      ],
    })
    export class AppModule {}
    

    3)定义 GraphQL 模式(SDL)

    示例 src/schema.graphql <-- !这里¡

    type Query {
      hello: String!
    }
    

    4)设置 Codegen 配置

    代码生成.yml

    overwrite: true
    schema: "src/schema.graphql"
    generates:
      src/graphql.ts:
        plugins:
          - "typescript"
          - "typescript-resolvers"
    
    

    5)运行 Codegen 生成类型

    包名.json

    {
      "scripts": {
        "generate": "graphql-codegen"
      }
    }
    

    npm 运行生成

    codegen.yml 定义输出,在本例中是 src/graphql.ts
    然后在生成完成后, 你可以导入生成的钩子 ,当你对 .graphl 文件进行一些修改时,你需要 再次 npm run generate
    希望这可以给你一些指导( https://the-guild.dev/graphql/codegen/docs/getting-started )。

返回
作者最近主题: