GraphQL编码用类型标-urql复制RegisterDocument

Question

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

codegen.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命名，或者是一个错误的param。使用类型记录-操作或/和类型记录包只会导致更多的重复。

有什么方法可以让打字稿-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

在尝试了几次不同的代码片段之后，我似乎已经开始工作了。谢谢，先生。保利的提示。

这是拍的。首先，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/突变处创建一个。保存突变的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
      }
    }
  }
`);

对我来说，唯一的问题是，如果我试图在模型中添加一个不存在的字段，编辑器就会冻结。组件中的使用情况：

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

Answer 2

我是查莉，来自行会，致力于GraphQL代码生成器。

preset: "client"不打算与其他插件一起使用。您必须使用client-preset或typescript-urql-plugin，后者提供了两种不同的方法来获得键入的GraphQL操作。

typescript-urql-plugin生成反应钩子，而client-preset生成的类型化GraphQL文档可以与URQL的原生useQuery()和useMutation()一起使用。

我们现在建议使用client-preset，它为相同的结果提供了更好的开发体验和更小的生成代码。

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