GraphQL Codegen duplicates RegisterDocument with typescript-urql

Question

The codegen.ts config below results in duplicating the RegisterDocument entries.

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'
      }
    }
  }
};

the output:

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);
};

Seemingly either the documentVariableSuffix param didn't affect the output const naming or it was a wrong param. The use of the typescript-operations or/and typescript packages only led to more duplicates.

What is the way to have typescript-urql register the mutation differently?

UP. The register mutation I need typings for:

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

Answer 1

I'm Charly, from The Guild, working on GraphQL Code Generator.

The preset: "client" is not meant to be used in combination with other plugins. You must use either the client-preset or typescript-urql-plugin which provides 2 different ways to get typed GraphQL Operations.

The typescript-urql-plugin generates React hooks while, the client-preset generated typed GraphQL documents that can be used with URQL's native useQuery() and useMutation().

We now recommend using the client-preset that provides a better developer experience and smaller generated code for the same result.

You will find a guide to setup the client-preset with URQL here: https://the-guild.dev/graphql/codegen/docs/guides/react-vue

Answer 2

After a few attempts with various code pieces it seems I've got it to work. Thank you mr. Poly for the hints.

Here's the take. First, the present iteration of graphql-codegen watches for .ts/.tsx documents not *.graphql ones. Second the only plugins needed are the ones listed in the docs.

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

Third the way to put the mutations etc. to a dedicated folder that I used was to create one at src/graphql/mutations. The register.ts holding the mutation had the following code:

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);