Missing query & mutation types after compilation for second time

[gino]

Hey everyone.

I am not quite sure if this could be a bug or if I am doing something wrong. But I have a few React components that are using the graphql(``) function for queries and mutations and I generated the types for the first time using the following codegen script. All the types were there as expected.

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

const config: CodegenConfig = {
  overwrite: true,
  errorsOnly: true,
  schema: "../api/schema.graphql",
  documents: "./src/**/*.{ts,tsx}",
  ignoreNoDocuments: true,
  generates: {
    "./src/__generated__/": {
      preset: "client",
      plugins: [],
    },
  },
};

export default config;

My generated graphql.ts currently contains 104 lines with all correct query types. And gave all my useQuery hooks the correct generics like I'm supposed to. However, I just added something to my schema file and ran the generator again to make sure that my types are updated.

But unfortunately, a lot of queries got removed from my generated types and now there are only 75 lines. I realized that all the {name}Query and {name}Mutation types are removed, which are the ones I use as generics. I have no idea why those types are getting removed. In order to get those back, I have to replace all the generics with <any> and remove the errored import in order to have those generated again. This is how I write my queries inside React components, should be fine:

import { graphql } from "~/__generated__";
import {
  CreateInvitationMutation,
  CreateInvitationMutationVariables,
} from "~/__generated__/graphql";

const CreateInvitationMutation = graphql(`
  mutation CreateInvitation($input: CreateInvitationInput!) {
    createInvitation(input: $input)
  }
`);

function Component() {
    // The generics are the generated types that I import. And the ones that will get removed after running the generator again (after making changes to the schema file).
    const { mutate, data } = useMutation<CreateInvitationMutation, CreateInvitationMutationVariables>(CreateInvitationMutation)
}

I have no clue what's going on and I tried to run the generation script with the verbose and debug flags, which didn't give me anything useful:

> graphql-codegen --config codegen.ts --debug --verbose

[STARTED] Parse Configuration
[SUCCESS] Parse Configuration
[STARTED] Generate outputs
[STARTED] Generate to ./src/__generated__/
[STARTED] Load GraphQL schemas
[SUCCESS] Load GraphQL schemas
[STARTED] Load GraphQL documents
[SUCCESS] Load GraphQL documents
[STARTED] Generate
[SUCCESS] Generate
[SUCCESS] Generate to ./src/__generated__/
[SUCCESS] Generate outputs
Running lifecycle hook "afterStart" scripts...
[CLI] Loading Schemas
[CLI] Loading Documents
[CLI] Generating output

I have no idea what's going on and I hope someone is able to help me out. Thanks a lot.

Edit: I have created a gist to show the differences between the initial types and the types that got removed after the second time of generating.

[charlypoly]

Hi @gino,

The client-preset removes the need to provide the Generic type arguments to GraphQL client's useQuery()/useMutation() functions.
You can directly use it as showcased below and still get full type safety:

import { graphql } from "~/__generated__";

const CreateInvitationMutation = graphql(`
  mutation CreateInvitation($input: CreateInvitationInput!) {
    createInvitation(input: $input)
  }
`);

function Component() {
    const { mutate, data } = useMutation(CreateInvitationMutation)
}