graphql/codegen/plugins/typescript/typescript-react-apollo

[giscus[bot]]

graphql/codegen/plugins/typescript/typescript-react-apollo

GraphQL Code Generator Documentation

https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-react-apollo

[please-rewrite]

a lot of the code examples have the following typo:

plugins: ['typescript', 'typescript-operations', 'typescript-operations'],

where 'typescript-operations' should be 'typescript-react-apollo'

[charlypoly]

Hi @please-rewrite,

Good catch, thank you!

It'll be fixed in a few minutes 🚀

[CemYil03]

When enabling withResultType Apollo is imported from @apollo/client. I work in the context of a project with apollo-client in version 2.x and am not able to upgrade. Is there some way to change the output for other apollo client versions?

[n1ru4l]

@CemYil03 Could you please provide PR with a failing test case for this?

[Hideman85]

Do we have already the possibility to generate fragments from @apollo/client@npm:3.7.X?
Like:

fragment UserFragment on User { id firstName lastName email }

Would gen:

export const UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserFragment"} /* ... */ ]};

export type UserFragment = { readonly __typename?: 'User', readonly id: string, readonly firstName: string, readonly lastName: string, readonly email };

export const useUserFragment = (id: string) => useFragment_experimental<UserFragment>({
    fragment: UserFragmenttDoc,
    fragmentName: 'UserFragment',
    from: { __typename: 'User', id },
  });

That would be such useful 🙏

[Hideman85]

Please improve the documentation with:

• Option since which version this is supported
• Usage example include input / output

I try to find how I can separate mutation, and queries for the defaultOptions because I must have network-only for mutation

EDIT: Have to patch the generator as follow:

//  Patch GQL codegen
{
  const path = './node_modules/@graphql-codegen/typescript-react-apollo/esm/visitor.js';
  const content = fs.readFileSync(path, 'utf8');
  fs.writeFileSync(
    path,
    content.replace(
      /const options = \{\.\.\.defaultOptions, \.\.\.baseOptions}/g,
      `const options = {...defaultOptions.\${operationType}, ...baseOptions}`,
    ),
  );
}
{
  const path = './node_modules/@graphql-codegen/typescript-react-apollo/cjs/visitor.js';
  const content = fs.readFileSync(path, 'utf8');
  fs.writeFileSync(
    path,
    content.replace(
      /const options = \{\.\.\.defaultOptions, \.\.\.baseOptions}/g,
      `const options = {...defaultOptions.\${operationType}, ...baseOptions}`,
    ),
  );
}

[ThePatriczek]

I'm trying to use typescript-react-apollo with documentNodeImport as @graphql-typed-document-node/core#TypedDocumentNode it works, but generics arguments was not passed to the DocumentNode type, so how can I pass the arguments to the type automatically?
Expected result (after additional config): ... as unknown as DocumentNode<NodeQuery, NodeQueryVariables>
@charlypoly @n1ru4l

import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type NodeQueryVariables = Types.Exact<{
  ID: Types.Scalars['ID']['input'];
}>;


export type NodeQuery = { __typename?: 'Query', node?: { __typename?: 'List', id: string } | { __typename?: 'ListItemFolder', id: string } | { __typename?: 'ListItemTable', id: string } | { __typename?: 'Table', id: string } | { __typename?: 'TableBodyRowCellDate', id: string } | { __typename?: 'TableBodyRowCellText', id: string } | { __typename?: 'TableBodyRowDefault', id: string } | { __typename?: 'TableHeaderRow', id: string } | { __typename?: 'TableHeaderRowCellDate', id: string } | { __typename?: 'TableHeaderRowCellText', id: string } | { __typename?: 'TableRowCellAppearance', id: string } | null };

export const NodeDocument = {
    kind: 'Document',
    definitions: [
        {
            kind: 'OperationDefinition',
            operation: 'query',
            name: { kind: 'Name', value: 'node' },
            variableDefinitions: [
                {
                    kind: 'VariableDefinition',
                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'ID' } },
                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'ID' } } },
                },
            ],
            selectionSet: {
                kind: 'SelectionSet',
                selections: [
                    {
                        kind: 'Field',
                        name: { kind: 'Name', value: 'node' },
                        arguments: [
                            {
                                kind: 'Argument',
                                name: { kind: 'Name', value: 'id' },
                                value: { kind: 'Variable', name: { kind: 'Name', value: 'ID' } },
                            },
                        ],
                        selectionSet: {
                            kind: 'SelectionSet',
                            selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'Node' } }],
                        },
                    },
                ],
            },
        },
        {
            kind: 'FragmentDefinition',
            name: { kind: 'Name', value: 'Node' },
            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Node' } },
            selectionSet: {
                kind: 'SelectionSet',
                selections: [{ kind: 'Field', name: { kind: 'Name', value: 'id' } }],
            },
        },
    ],
} as unknown as DocumentNode;

[ThePatriczek]

I added new Apollo hooks e.g. useSuspenseQuery, useBackgroundQuery, useFragment, to the plugin script below

const apolloImport = "import * as Apollo from '@apollo/client';";

function generateOperationHook(type, name) {
    const operationName = name.charAt(0).toUpperCase() + name.slice(1);
    if (type === 'query') {
        return `export const use${operationName}Query = (options?: Apollo.QueryHookOptions<${operationName}Query, ${operationName}QueryVariables>) => {
  return Apollo.useQuery<${operationName}Query, ${operationName}QueryVariables>(${operationName}Document, options);
};
export const use${operationName}LazyQuery = (options?: Apollo.LazyQueryHookOptions<${operationName}Query, ${operationName}QueryVariables>) => {
  return Apollo.useLazyQuery(${operationName}Document, options);
};

export const use${operationName}SuspenseQuery = (options?: Apollo.SuspenseQueryHookOptions<${operationName}Query, ${operationName}QueryVariables>) => {
  return Apollo.useSuspenseQuery(${operationName}Document, options);
};

export const use${operationName}BackgroundQuery = (options?: Apollo.BackgroundQueryHookOptions<${operationName}Query, ${operationName}QueryVariables>) => {
  return Apollo.useBackgroundQuery(${operationName}Document, options);
};
`;
    } else if (type === 'mutation') {
        return `export const use${operationName}Mutation = (options?: Apollo.MutationHookOptions<${operationName}Mutation, ${operationName}MutationVariables>) => {
  return Apollo.useMutation(${operationName}Document, options);
};`;
    } else if (type === 'subscription') {
        return `export const use${operationName}Subscription = (options?: Apollo.SubscriptionHookOptions<${operationName}Subscription, ${operationName}SubscriptionVariables>) => {
  return Apollo.useSubscription(${operationName}Document, options);
};`;
    }

    return '';
}

function generateFragmentHook(name, fragmentName) {
    return `export const use${fragmentName}Fragment = (options:  { from: Apollo.StoreObject | Apollo.Reference } & Omit<Partial<Apollo.UseFragmentOptions<${fragmentName}Fragment, Apollo.OperationVariables>>, 'from'>) => {
  return Apollo.useFragment<${fragmentName}Fragment>({
    fragment: ${fragmentName}FragmentDoc,
    fragmentName: "${fragmentName}",
    ...options,
        from: {
        __typename: "${name}",
        ...options.from
    },
});
}`;
}

module.exports = {
    plugin: (schema, documents, config) => {
        const hooks = documents.flatMap(({ document }) => {
            const operations = document.definitions
                .filter((def) => def.kind === 'OperationDefinition')
                .map((operation) => ({
                    type: operation.operation,
                    operationName: operation.name.value,
                }));
            const fragments = document.definitions
                .filter((def) => def.kind === 'FragmentDefinition')
                .map((fragment) => ({
                    name: fragment.typeCondition.name.value,
                    fragmentName: fragment.name.value,
                }));
            const solvedOperations = operations.map(({ type, operationName }) =>
                generateOperationHook(type, operationName)
            );
            const solvedFragments = fragments.map(({ name, fragmentName }) => generateFragmentHook(name, fragmentName));
            return [...solvedOperations, ...solvedFragments];
        });

        if (hooks.length) {
            return [apolloImport, ...hooks].join('\n\n');
        }
    },
};

[jackdh]

Is there a place we can see the release notes for updates for this plugin? It's super helpful thank you!

[konhi]

With this plugin, you can generate conveinvent functions for hooks, like:
const { data, error, loading } = useTest()

But you don't always use hooks, especially when you fetch on server, like in server-side components, on nextjs fetchers like getStaticPaths. Is it possible to generate function the same, that would allow me to do same using async:

const { data } = await fetchTest()

So far im writing helpers functions, like:

const fetchTest = (options: ...) => client.query<TestQuery, TestQueryVariables>)({
  query: FetchLayoutDocument
)

But I wonder if it's possible to do it automatically. If not, I'd love to try contributting to this plugin to have that feature.

[mverderese]

@ThePatriczek I'm looking to leverage generated suspense queries in my project. I've installed typescript-react-apollo 4.0.0 but it doesn't look like the suspense queries are being genearted. Here is my config:

src/apollo-client/generated/client-operations.tsx:
  schema:
    - ./src/server/graphql/helpers/type-defs/*.ts
    - ./src/server/graphql/**/schema.ts
  documents:
    - ./src/apollo-client/**/*.graphql
    - ./src/app/**/*.graphql
  plugins:
    - typescript
    - typescript-operations
    - typescript-react-apollo
    - add:
        content: "/* eslint-disable */"
  config:
    scalars:
      Date: string
      DateTime: string
      Tz: string
      Email: string
      PhoneNumber: string
      Url: string
      Coordinates: string

Query looks like this:

query GetBusiness {
    business {
        defaultBusiness {
            payload {
                id
                name
            }
        }
    }
}

And output looks like this:

export function useGetBusinessQuery(baseOptions?: Apollo.QueryHookOptions<GetBusinessQuery, GetBusinessQueryVariables>) {
        const options = {...defaultOptions, ...baseOptions}
        return Apollo.useQuery<GetBusinessQuery, GetBusinessQueryVariables>(GetBusinessDocument, options);
      }
export function useGetBusinessLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetBusinessQuery, GetBusinessQueryVariables>) {
          const options = {...defaultOptions, ...baseOptions}
          return Apollo.useLazyQuery<GetBusinessQuery, GetBusinessQueryVariables>(GetBusinessDocument, options);
        }
export type GetBusinessQueryHookResult = ReturnType<typeof useGetBusinessQuery>;
export type GetBusinessLazyQueryHookResult = ReturnType<typeof useGetBusinessLazyQuery>;
export type GetBusinessQueryResult = Apollo.QueryResult<GetBusinessQuery, GetBusinessQueryVariables>;

Is there something I'm missing to generate the suspense queries? Thanks!

[ThePatriczek]

If you want to simply generate suspense query, you could add my script in comment above e.g.

#8641 (reply in thread)

Just create it as local file custom-hooks-plugin.ts and add the file to plugin section in the config file.

[mverderese]

Thanks, that worked! I made a few small tweaks so that it would work with the existing typescript-react-apollo plugin and add some strong generic types. Also added the // @ts-nocheck because of my tsonfig.json not allowing implicit types.

// https://github.com/dotansimha/graphql-code-generator/discussions/8641#discussioncomment-6761735
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck

function generateOperationHook(type, name) {
  const operationName = name.charAt(0).toUpperCase() + name.slice(1);
  if (type === "query") {
    return `export const use${operationName}SuspenseQuery = (options?: Apollo.SuspenseQueryHookOptions<${operationName}Query, ${operationName}QueryVariables>) => {
  return Apollo.useSuspenseQuery<${operationName}Query, ${operationName}QueryVariables>(${operationName}Document, options);
};

export const use${operationName}BackgroundQuery = (options?: Apollo.BackgroundQueryHookOptions<${operationName}Query, ${operationName}QueryVariables>) => {
  return Apollo.useBackgroundQuery<${operationName}Query, ${operationName}QueryVariables>(${operationName}Document, options);
};

export type ${operationName}SuspenseQueryHookResult = ReturnType<typeof use${operationName}SuspenseQuery>;
export type ${operationName}BackgroundQueryHookResult = ReturnType<typeof use${operationName}BackgroundQuery>;
`;
  }

  return "";
}

function generateFragmentHook(name, fragmentName) {
  return `export const use${fragmentName}Fragment = (options:  { from: Apollo.StoreObject | Apollo.Reference } & Omit<Partial<Apollo.UseFragmentOptions<${fragmentName}Fragment, Apollo.OperationVariables>>, 'from'>) => {
  return Apollo.useFragment<${fragmentName}Fragment>({
    fragment: ${fragmentName}FragmentDoc,
    fragmentName: "${fragmentName}",
    ...options,
        from: {
        __typename: "${name}",
        ...options.from
    },
});
}`;
}

module.exports = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  plugin: (schema, documents, config) => {
    const hooks = documents.flatMap(({ document }) => {
      const operations = document.definitions
        .filter((def) => def.kind === "OperationDefinition")
        .map((operation) => ({
          type: operation.operation,
          operationName: operation.name.value,
        }));
      const fragments = document.definitions
        .filter((def) => def.kind === "FragmentDefinition")
        .map((fragment) => ({
          name: fragment.typeCondition.name.value,
          fragmentName: fragment.name.value,
        }));
      const solvedOperations = operations.map(({ type, operationName }) =>
        generateOperationHook(type, operationName),
      );
      const solvedFragments = fragments.map(({ name, fragmentName }) =>
        generateFragmentHook(name, fragmentName),
      );
      return [...solvedOperations, ...solvedFragments];
    });

    if (hooks.length) {
      return [...hooks].join("\n\n");
    }
  },

I saved this file at lib/graphql-codegen/custom-apollo-hooks-plugin.ts and updated my codegen.yml file to this

src/apollo-client/generated/client-operations.tsx:
  schema:
    - ./src/server/graphql/helpers/type-defs/*.ts
    - ./src/server/graphql/**/schema.ts
  documents:
    - ./src/apollo-client/**/*.graphql
    - ./src/app/**/*.graphql
  plugins:
    - typescript
    - typescript-operations
    - typescript-react-apollo
    - lib/graphql-codegen/custom-apollo-hooks-plugin.ts
    - add:
        content: "/* eslint-disable */"

Now it's outputting this:

export const GetBusinessDocument = gql`
    query GetBusiness {
  business {
    payload {
      id
      name
    }
  }
}
    `;

/**
 * __useGetBusinessQuery__
 *
 * To run a query within a React component, call `useGetBusinessQuery` and pass it any options that fit your needs.
 * When your component renders, `useGetBusinessQuery` 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 } = useGetBusinessQuery({
 *   variables: {
 *   },
 * });
 */
export function useGetBusinessQuery(baseOptions?: Apollo.QueryHookOptions<GetBusinessQuery, GetBusinessQueryVariables>) {
        const options = {...defaultOptions, ...baseOptions}
        return Apollo.useQuery<GetBusinessQuery, GetBusinessQueryVariables>(GetBusinessDocument, options);
      }
export function useGetBusinessLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetBusinessQuery, GetBusinessQueryVariables>) {
          const options = {...defaultOptions, ...baseOptions}
          return Apollo.useLazyQuery<GetBusinessQuery, GetBusinessQueryVariables>(GetBusinessDocument, options);
        }
export type GetBusinessQueryHookResult = ReturnType<typeof useGetBusinessQuery>;
export type GetBusinessLazyQueryHookResult = ReturnType<typeof useGetBusinessLazyQuery>;
export type GetBusinessQueryResult = Apollo.QueryResult<GetBusinessQuery, GetBusinessQueryVariables>;

export const useGetBusinessSuspenseQuery = (options?: Apollo.SuspenseQueryHookOptions<GetBusinessQuery, GetBusinessQueryVariables>) => {
  return Apollo.useSuspenseQuery<GetBusinessQuery, GetBusinessQueryVariables>(GetBusinessDocument, options);
};

export const useGetBusinessBackgroundQuery = (options?: Apollo.BackgroundQueryHookOptions<GetBusinessQuery, GetBusinessQueryVariables>) => {
  return Apollo.useBackgroundQuery<GetBusinessQuery, GetBusinessQueryVariables>(GetBusinessDocument, options);
};

export type GetBusinessSuspenseQueryHookResult = ReturnType<typeof useGetBusinessSuspenseQuery>;
export type GetBusinessBackgroundQueryHookResult = ReturnType<typeof useGetBusinessBackgroundQuery>;

I could probably just make more updates to custom-apollo-hooks-plugin.ts to remove the need for typescript-react-apollo but I'll tackle that some other time.

[r-sugi]

I do NOT want to generate suspense query( default: generate on)
How can I set value to config in codegen.yml?

"@apollo/client": "3.8.x" or later

import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'YOUR_SCHEMA_HERE',
  documents: './src/**/*.graphql',
  generates: {
    './generated-types.ts': {
      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo']
    }
  }
}
export default config

[r-sugi]

I understand that config does not have I/F for "off".
https://github.com/dotansimha/graphql-code-generator-community/blob/6685dc7be42e35cc88f86534bfd1562e6beec110/packages/plugins/typescript/react-apollo/src/config.ts