Graphql Codegen: Issues generating hooks with types

Question

I am using graphql codegen programmatically.

import * as typescriptReactApolloPlugin from "@graphql-codegen/typescript-react-apollo";

const config: Types.GenerateOptions = {
  documents: [{ document: doc }],
  config: {},
  // returns the string output, rather than writing to a file
  filename: "index.ts",
  schema: undefined,
  schemaAst: schema,
  plugins: [
    {
      typescriptReactApollo: {},
    },
  ],
  pluginMap: {
    typescriptReactApollo: typescriptReactApolloPlugin,
  },
};
const result = await codegen(config);

This is my document (Query):

query myquery {
  Users {
    limit
  }
}

And this is the generated result:

import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;

export const MyqueryDocument = gql`
    query myquery {
  Users {
    limit
  }
}
    `;

/**
 * __useMyqueryQuery__
 *
 * To run a query within a React component, call `useMyqueryQuery` and pass it any options that fit your needs.
 * When your component renders, `useMyqueryQuery` returns an object from Apollo Client that contains loading, error, and data properties
 * you can use to render your UI.
 *
 * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
 *
 * @example
 * const { data, loading, error } = useMyqueryQuery({
 *   variables: {
 *   },
 * });
 */
export function useMyqueryQuery(baseOptions?: Apollo.QueryHookOptions<MyqueryQuery, MyqueryQueryVariables>) {
        const options = {...defaultOptions, ...baseOptions}
        return Apollo.useQuery<MyqueryQuery, MyqueryQueryVariables>(MyqueryDocument, options);
      }
export function useMyqueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyqueryQuery, MyqueryQueryVariables>) {    
          const options = {...defaultOptions, ...baseOptions}
          return Apollo.useLazyQuery<MyqueryQuery, MyqueryQueryVariables>(MyqueryDocument, options);
        }
export type MyqueryQueryHookResult = ReturnType<typeof useMyqueryQuery>;
export type MyqueryLazyQueryHookResult = ReturnType<typeof useMyqueryLazyQuery>;
export type MyqueryQueryResult = Apollo.QueryResult<MyqueryQuery, MyqueryQueryVariables>;

Problem

The problem is that some types are missing e.g. MyqueryQuery, MyqueryQueryVariables.

How to fix that?

Update:

Adding the plugins typescript and typescript-operations will generate additional types. But the hooks are no longer generated.

I made a Codesandbox showing the problem.

Nils Hartmann · Accepted Answer · 2022-08-24 09:30:03Z

1

I think you need to add two more plugins:

If you're going to https://www.graphql-code-generator.com/ and select React Apollo Hooks from the Live examples, than you see the needed plug-ins in the codegen.yml-file. If you remove typescript and typescript-operation there, similiar output as in your example is generated.

Note: for each plugin you want to use, add another object to the plugins attribute of the config object. This object only has one key (name of the plugin) and as value another (potentially empty) object with config options for that plugin.

Example:

const config = {
  // ...
  plugins: [
    {
      typescript: {}
    },
    {
      typescriptOperations: {},
    }, 
    {
      typescriptReactApollo: {}
    }
  ]
}

I have modified your codesandbox with a working example: https://codesandbox.io/s/relaxed-noyce-d200dg?file=/index.js

edited Aug 24, 2022 at 9:30

answered Aug 23, 2022 at 18:36

Nils Hartmann

5563 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dknaack Over a year ago

Thanks for you answer! I tried adding the other two plugins but it didnt work. I will make a codesandbox showing the problem.

dknaack Over a year ago

I created a codesandbox @ codesandbox.io/s/bold-kilby-kuiu4g?file=/index.js. Thx for your help!

Nils Hartmann Over a year ago

I modified my answer, see my example on how to use the plugins array

Collectives™ on Stack Overflow

Graphql Codegen: Issues generating hooks with types

Problem

Update:

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Update:

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related