1

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.

dknaack
  • 60,192
  • 27
  • 155
  • 202

1 Answers1

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

Nils Hartmann
  • 466
  • 3
  • 6