GraphQL Codegen 使用 typescript-urql 复制 RegisterDocument

Question

下面的 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);
};

看起来要么documentVariableSuffix参数不影响输出 const 命名，要么它是一个错误的参数。使用 typescript-operations 或/和 typescript 包只会导致更多重复。

让 typescript-urql 以不同的方式注册突变的方法是什么？

向上。register我需要输入的突变：

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

Answer 1

我是来自 The Guild 的 Charly，从事 GraphQL 代码生成器的工作。

该插件preset: "client"不适合与其他插件结合使用。您必须使用 或client-preset，typescript-urql-plugin它提供了两种不同的方式来获取类型化的 GraphQL 操作。

生成typescript-urql-pluginReact hooks，同时client-preset生成的类型化 GraphQL 文档可与 URQL 的本机useQuery()和useMutation().

我们现在建议使用可以client-preset提供更好的开发人员体验和更小的生成代码来获得相同的结果。

您可以在这里找到使用 URQL 设置的指南client-preset：https://the-guild.dev/graphql/codegen/docs/guides/react-vue

Answer 2

经过几次尝试各种代码片段后，我似乎已经可以正常工作了。谢谢你先生。聚为提示。

这是要点。首先，当前迭代的graphql-codegen手表适用于.ts/ .tsx，documents而不是 *.graphql。其次，唯一需要的插件是文档中列出的插件。

const config: CodegenConfig = {
  overwrite: true,
  schema: "http://localhost:4000/graphql",
  documents: "src/graphql/mutations/*.ts",
  generates: {
    "src/generated/graphql/": {
      preset: "client",
      plugins: []
    }
  }
};

第三种将突变等放入我使用的专用文件夹的方法是在 src/graphql/mutations 中创建一个文件夹。保存突变的 register.ts 具有以下代码：

import { graphql } from '../../generated/graphql';

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

The only problem for me was if I tried to add a field to it that didn't exist on the model the editor froze. The usage within the component:

import { registerMutationDocument } from '../graphql/mutations/register';
...
const [, register] = useMutation(registerMutationDocument);