Using GraphQL Code Generator with React Query and React

This example illustrates using GraphQL Code Generator in a React application using React Query with graphql-request as a GraphQL Client.

You will find the TypeScript-based codegen configuration in codegen.ts.

This simple codegen configuration generates types and helpers in the src/gql folder that help you to get typed GraphQL Queries and Mutations seamlessly ⚡️

For a step-by-step implementation tutorial, please refer to the related guide:

https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue-angular

--

Please note that the client preset used in this example is compatible with graphql-request from 5.0 as React Query fetcher.

For indications in writing your fetcher, please refer to our documentation.