如何让 Apollo gql codgen 与前端 nextJS 一起使用

Question

我正在使用 nextJS，我希望用 apollo 输出我的前端 React 查询，但没有配置起作用。当我使用时，我的查询出现未知错误，import {gql} from src/__generated__/gql当​​我将鼠标悬停在 gql() 上时，出现以下消息：

The query argument is unknown! Please regenerate the types

我的问题是，因为我使用的是 nextJS，所以我需要做一些不同的事情吗？我希望能够将TypeScript 与 Apollo 客户端代码 gendocs 一起使用，以便输入我的 gql 查询

我的整个 pothos 架构都在我的pages/api/index.ts文件中（我还不知道如何将此代码分散到多个文件中）

查询示例：

const CREATED_EVENT_QUERY = gql(`
    query EventById($id: mongoId!) {
        eventById(id: $id) {
            _id
            name
            description
            location{
              coordinates
            }
            date
            eventApplicants{
            name
            userId
            weight
          }
        link
        weights{
          weight
          spotsAvailable{
            name
            userId
          }
        }
        }
    }
            `);

// Apollo Query

    const { loading, error, data } = useQuery(CREATED_EVENT_QUERY, {
        variables: {
            id: params.id
        }
    });

我尝试过以下配置：

阿波罗推荐

上面链接

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

const config: CodegenConfig = {
    schema: 'http://localhost:3000/api',
    documents: ['*.ts'],
    generates: {
        './src/__generated__/': {
            preset: 'client',
            plugins: [],
            presetConfig: {
                gqlTagName: 'gql',
            }
        }
    },
    ignoreNoDocuments: true,
};

export default config;

公会nextJS推荐

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

const config: CodegenConfig = {
 // ...
 generates: {
 'path/to/file.ts': {
 plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
 config: {
 reactApolloVersion: 3
 }
 }
 }
}
export default config

两者的结合

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

const config: CodegenConfig = {
    schema: 'http://localhost:3000/api',
    documents: ['*.ts'],
    generates: {
        'pages/api/index.ts': {
            plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
            config: {
                reactApolloVersion: 3
            }
        }
    },
    ignoreNoDocuments: true,
};

export default config;

Answer 1

您的配置文件应如下所示：

这假设您的 graphql 服务器位于 api/index.ts

// in the root of your project

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

const config: CodegenConfig = {
  schema: "http://localhost:3000/api",
  documents: ["app/**/*.tsx", "!pages/api/index.ts"],
  generates: {
    "./src/__generated__/": {
      preset: "client",
      plugins: [],
      presetConfig: {
        gqlTagName: "gql",
      },
    },
  },
  ignoreNoDocuments: true,
};

export default config;

然后您应该将以下内容添加到 package.json 中：

  "scripts": {
       "compile": "graphql-codegen",
    "watch": "graphql-codegen --w"
  },

然后要使用类型化的 gql 查询对象，请按如下方式导入：

请注意，您必须更新导入，以便 src 文件夹的路径正确

import {gql} from "src/__generated__"