使用 TypeScript 输入 GraphQL 查询的响应

Question

我刚开始使用 GraphQl，但我非常习惯使用其他 API 媒介，例如 REST 和 gRPC。我正在使用 Next.js 创建一个电子商务 Shopify 店面，而 Shopfy 的 API 全部采用 GraphQL。当我创建查询并请求它时，我得到了想要的响应，但是，当我尝试对数据执行任何操作时，TypeScript 会感到不安，因为它不知道返回数据的类型。我希望能够输入返回的数据。

我想过只为返回的类型创建一个接口，但这似乎效率很低，尤其是当我的项目规模扩大时。

我读到了有关使用 codegen 的内容，我认为它可以根据创建的查询生成类型和接口。 Shopify 在 here 有一个 GitHub 存储库，但我尝试使用他们的示例代码，但 codegen 无法在 Shopify 后端找到或访问 graphQL 架构。 （我可能是错的，但代码生成错误代码的上限为 20 个左右字符，所以我不知道出了什么问题）。

生成 GraphQL 响应的类型是可能的，但无论我看到什么，我都觉得我做错了什么。

Answer 1

试试这个：

// Install dependencies
// npm install -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-resolvers

在 codegen 根文件上：

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  generates: {
    'graphql/generated/storefront.ts': {
      schema: 'https://shopify.dev/storefront-graphql-direct-proxy/2024-10',
      documents: 'graphql/storefront/**/*.graphql', // if you want to use .ts files, just check the graphql-codegen docs
      plugins: [
        'typescript',
        'typescript-resolvers',
        'typescript-operations',
      ],
      config: {
        nonOptionalTypename: true,
        legacyMode: false,
        pureMagicComment: true,
        dedupeFragments: true,
      },
    },
  },
};

export default config;