6

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
      }
    }
  }
`)
El Anonimo
  • 1,759
  • 3
  • 24
  • 38

2 Answers2

10

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

Charly Poly
  • 384
  • 1
  • 8
  • Did you by `typescript-urql-plugin` refer to `typescript-urql`? If so `typescript-urql` used with neither `preset: "client"` or `preset: "client-preset"` resulted in `Plugin "typescript-urql" validation failed`. – El Anonimo Oct 20 '22 at 18:39
  • A full `useMutation` example would be of use to me if available. – El Anonimo Oct 20 '22 at 19:56
  • Sure, please find a complete working URQL example of a mutation definition with the `client-preset` here: https://github.com/charlypoly/codegen-repros/blob/master/urql-client-preset-mutation/src/App.tsx#L6-L28 – Charly Poly Oct 21 '22 at 06:28
  • How do I type the `graphql` method output to Urlq'l `useMutation` since the former returns `unknown` and the latter accepts a `'string | DocumentNode | TypedDocumentNode'`? – El Anonimo Oct 22 '22 at 02:13
  • @ElAnonimo could you share the query you are trying to get typing from? Please not that your query should not contains any inline fragment document, as explained here: https://stackoverflow.com/questions/74068078/the-query-is-always-of-type-unknown-when-created-with-graphql-codegen/74094939#74094939 – Charly Poly Oct 24 '22 at 08:21
  • It is the same one in the original post with `RegisterDocument` only replace `gql` with `graphql`, see the updated post. – El Anonimo Oct 24 '22 at 17:30
  • Could you provide a use example of the `typescript-urql` too? – El Anonimo Oct 24 '22 at 21:41
  • > How do I type the graphql method output to Urlq'l useMutation since the former returns unknown and the latter accepts a 'string | DocumentNode | TypedDocumentNode'? Did you installed `graphql` as a dev dependency and run `graphql-codegen` in watch mode? – Charly Poly Oct 25 '22 at 09:04
  • You will find examples for URQL plugin usage in previous versions of our docs: https://web.archive.org/web/20220305125849/https://www.graphql-code-generator.com/docs/guides/react#apollo-and-urql – Charly Poly Oct 25 '22 at 09:05
  • "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." - this was very helpful but the documentation should be very explicit about this. I never saaw this anywhere in the docs. – gabe Jul 21 '23 at 00:03
1

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);
El Anonimo
  • 1,759
  • 3
  • 24
  • 38