标签: graphql-codegen

我正在使用该@graphql-codegen/cli工具从我的 graphql 服务器中生成打字稿类型。这是我的codegen.yml内容：

overwrite: true
schema: "http://localhost:3001/graphql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
  ./graphql.schema.json:
    plugins:
      - "introspection"

这是package.json我用来生成类型 ( yarn schema)的脚本：

"schema": "graphql-codegen --config codegen.yml"

所有这些都是通过执行 cli 向导自动生成的yarn codegen init。

但是当我运行时yarn schema，这些是我得到的错误：

（服务器正在运行http://localhost:3001/graphql并公开图形模式。

感谢您的帮助和建议

这是托管在我的服务器中的 .graphql 文件（http://localhost:3001/graphql

# -----------------------------------------------
# !!! THIS FILE WAS GENERATED BY TYPE-GRAPHQL !!!
# !!!   DO NOT MODIFY THIS FILE BY YOURSELF   !!!
# -----------------------------------------------

"""Date …

更新：最小示例代码复制

我有自动生成的代码（Graphql-Codegen），可以生成以下类型。为了简单起见，我将其压缩了。

export type AccessControlList = {
  __typename?: 'AccessControlList';
  id: Scalars['Int'];
  subscriber: Scalars['Int'];
  subscriberRel: MasterSubscriberData;
};

export type Query = {
  __typename?: 'Query';
  workOrders: Array<WorkOrdersGroupBy>;
  viewer: AccessControlAccounts;
};

由于我只对此示例的查看器感兴趣，因此我使用 Typescript Pick 选择它

export type ViewerType = Pick<Query, 'viewer'>;

它还会自动为需要 AccessControlAccounts 中某些但不是所有可能字段的查询生成专用类型，并且我需要的字段也有所不同。我在这里省略了 MasterSubscriberData 的类型定义，但可以在下面推断出来（但本示例并不真正需要）

不同的查询需要访问查询结构的不同部分，因此为每个不同的查询生成不同的类型，例如

export type LeadSourcesQuery = 
{ __typename?: 'Query', 
  viewer: { __typename?: 'AccessControlAccounts', 
            AccessControlList: Array<{ __typename?: 'AccessControlList', 
                                     subscriberRel: { __typename?: 'MasterSubscriberData', 
                                     LeadSources: Array<{ __typename?: 
                                     'LeadSources', id: number> } 
                                    }> 
         } 
};

我正在尝试创建一个通用函数，它可以返回对常用访问的深层嵌套对象的引用，而不管传递的子查询类型如何（例如LeadSourcesQuery等）。我想出的方法可以在运行时运行，但无法通过 Typescript 静态检查。

// …

我正在使用库中的打字稿操作graphql-codegen。但我来自 Apollo 已弃用的代码生成器，并且很喜欢它们导出类型的方式。

对于这样的查询

query MyData {
  viewer {
    id
    username
  }
}

我将从 apollo-tooling codegen 中得到这个：

query MyData {
  viewer {
    id
    username
  }
}

但在 graphql-codegen 中我得到了这个：

export type MyDataQuery_viewer = {
  __typename: 'Viewer';
  id: number;
  username: string;
}
export type MyDataQuery = {
  __typename: 'Query',
  viewer?: MyDataQuery_viewer;
}

是否存在任何配置graphql-codegen可以为我提供所有嵌套对象的类型，而不是在单个类型中定义所有内容？

名为的自定义标量类型Date后端定义了

在前端“GraphQL 代码生成器”（https://www.graphql-code-generator.com/）用于从模式生成打字稿类型。

看起来codegen.yml像这样：

overwrite: true
schema: 'http://mybackenurl/graphql'
documents: 'src/**/*.graphql'
generates:
    src/generated/graphql.ts:
        config:
            exposeQueryKeys: true
            exposeFetcher: true
            fetcher: '../GraphQLFetcher#fetcher'
            scalars: 
                Date: Date
        plugins:
            - 'typescript'
            - 'typescript-operations'
            - 'typescript-react-query'

这给出了其中 graphql 模式中具有自定义标量类型的所有字段Date对应于Date生成的打字稿类型中的打字稿类型的类型。然而在运行时它仍然是一个string. Date: Date如果去掉配置中标量不足的部分，则对应的类型为Any，则对应的类型为。

猜测是我们需要指定某种映射器，它将我们从后端获得的 ISO 8601 字符串转换为 typescript Date，但我不明白这是如何做到的。

我使用以下约定让解析器返回部分数据，并允许其他解析器完成缺失的字段：

type UserExtra {
  name: String!
}

type User {
  id: ID!
  email: String!
  extra: UserExtra!
}

type Query {
  user(id: ID!): User!
  users: [User!]!
}

type UserExtra {
  name: String!
}

type User {
  id: ID!
  email: String!
  extra: UserExtra!
}

type Query {
  user(id: ID!): User!
  users: [User!]!
}

我遇到的问题是 GraphQL 代码生成器生成一个期望返回完整形状Resolver的类型，当然它不知道即使我从 返回部分形状，由于客户端最终将收到尽管如此，还是符合预期的形状。Query#usersUserQuery#usersUser#extra

处理此案同时让 TS 满意的最佳方法是什么？

尝试遵循官方页面上相当稀疏的教程并没有让我走得太远。

我本质上是试图根据 api 调用的参数添加某个标头，但我不知道如何配置端点来执行此操作。

我加载 GraphQL 架构，如下所示：

const schema = loadSchemaSync('./src/graphql/server/schema/*.gql', {
  loaders: [new GraphQLFileLoader()],
})

这在本地工作正常，但是，当部署到 vercel 时，我收到错误：

Unable to find any GraphQL type definitions for the following pointers:
          - ./src/graphql/server/schema/*.gql

我认为这是因为 vercel 在构建后删除了相关文件？

我使用草莓和草莓-django-plus构建了一个 GraphQL API ，该 API 使用 Django 托管在 http://localhost:8000/graphql 上。我能够在本地主机页面上使用 GraphiQL 成功与 API 交互。

我现在尝试使用GraphQL 代码生成器和 React 查询从前端访问 API。当我运行命令时yarn graphql-codegen，出现以下错误：

\xe2\x9c\x94 Parse configuration\n  \xe2\x9d\xaf Generate outputs\n    \xe2\x9d\xaf Generate src/generated/graphql.ts\n      \xe2\x9c\x96 Load GraphQL schemas\n        \xe2\x86\x92 Failed to load schema\n        Load GraphQL documents\n        Generate\n    \xe2\x9d\xaf Generate ./graphql.schema.json\n      \xe2\x9c\x96 Load GraphQL schemas\n        \xe2\x86\x92 Failed to load schema\n        Load GraphQL documents\n        Generate\n\n\n Found 2 errors\n\n  \xe2\x9c\x96 ./graphql.schema.json\n    Failed to load schema from http://localhost:8000/graphql:\n\n        Request with …

下面的 codegen.ts 配置会导致RegisterDocument条目重复。

代码生成器.ts：

const config: CodegenConfig = {
  overwrite: true,
  schema: "http://localhost:4000/graphql",
  documents: "src/graphql/**/*.graphql",
  generates: {
    "src/generated/graphql": {
      preset: "client",
      plugins: [
        "typescript-urql"
      ],
      config: {
        documentVariableSuffix: 'test2'
      }
    }
  }
};

输出：

export const RegisterDocument = {"kind":"Document", ...}

export const RegisterDocument = gql`
    mutation Register($username: String!, $password: String!) {
  register(options: {username: $username, password: $password}) {
    errors {
      field
      message
    }
    user {
      id
      username
      createdAt
    }
  }
}
    `;

export function useRegisterMutation() {
  return Urql.useMutation<RegisterMutation, RegisterMutationVariables>(RegisterDocument); …

我使用 Pothos 构建 graphql 架构，并使用 graphql-codegen 生成基于该架构的类型。服务器通过 graphql-yoga 和 nextjs 运行，并且通过 graphiql 界面运行时实际查询工作正常。我一直在尝试进行设置，以便根据本文使用 apollo 客户端正确输入我的 gql 架构使用 apollo 客户端正确输入我的 gql 架构。

模式生成器的片段：

builder.queryType({
  fields: t => ({
    greetings: t.string({
      resolve: (root, args, context) => `Welcome ${context.session?.user?.nickname}`
    })
  })
})

graphql-codegen 在书面文件中生成以下类型.ts，因此我知道它看到了正确的架构。

export type Query = {
  __typename?: 'Query';
  greetings: Scalars['String'];
}

但是，当我根据 codegen 文档导入 gql 文件时，它会返回unknown，并且 VSCode 的悬停窗口显示“查询参数未知！请重新生成类型。” 我尝试过重新生成并重新启动 VSCode，但没有任何变化。

import { gql } from '@/gql/gql'

const query = gql('query { greetings }')