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 🙏

[rohit-gohri]

Fragments available in 4.2.0 via withFragmentHooks: true option, added in dotansimha/graphql-code-generator-community#483

[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

[tavantzo]

Is there a way the generated react hooks not to include the useSuspenseQuery?

[CompuWiser]

Are there plans to add:

• useLoadableQuery
• useBackgroundQuery
• useReadQuery
• useLoadableQuery

[CompuWiser]

And:

• TypedDocumentNode

[FarhanHossain00]

I'm trying to use it in combination with typed-document-node.

          "src/generated/types.ts": {
            plugins: [
                "typescript",
                "typescript-operations",
                "typed-document-node",
            ],
        },
        "src/generated/hooks.ts": {
            plugins: ["typescript-react-apollo"],
            config: {
                documentMode: "external",
                importDocumentNodeExternallyFrom: "./types",
            },
            preset: "import-types",
            presetConfig: {
                typesPath: "./types",
            },
        },

However, the document node exported with Document suffix but in the hooks used without the suffix.
For example, from my types file it's exported at getUserDocument but in hooks file it is trying to access it like Operations.getUser
Any idea how to fix this naming issue? Or is there any other way to use these 2 plugins together?

[tp6gw94]

I think you should use this preset

[tp6gw94]

Oh, sorry, I misread it. I’m currently facing the same problem as you.

[tp6gw94]

Update: You should add the following to the src/generated/types.ts file:

"src/generated/types.ts": {
            documents: [
               'path'
            ],
            plugins: [
                "typescript",
                "typescript-operations",
                "typed-document-node",
            ],
        },

This will resolve the issue.