How to use GraphQL and React Query with GraphQL Code Generator (based on Next.Js)

pnpm create next-app . --typescript  

pnpm add -S @tanstack/react-query graphql graphql-requestpnpm add -D @tanstack/react-query-devtools

pnpm add -S dotenv

NEXT_PUBLIC_GRAPHQL_URL=https://graphqlzero.almansi.me/api

declare namespace NodeJS {    export interface ProcessEnv {        NEXT_PUBLIC_GRAPHQL_URL: string;    }}

const queryClient = new QueryClient({    defaultOptions: {        queries: {            refetchOnMount: false,            refetchOnWindowFocus: false,            refetchOnReconnect: false,        },    },});

import '../styles/globals.css';import type { AppProps } from 'next/app';import { Hydrate, QueryClientProvider, QueryClient } from '@tanstack/react-query';import { ReactQueryDevtools } from '@tanstack/react-query-devtools';export const queryClient = new QueryClient({    defaultOptions: {        queries: {            refetchOnMount: false,            refetchOnWindowFocus: false,            refetchOnReconnect: false,        },    },});function MyApp({ Component, pageProps }: AppProps) {    return (        <QueryClientProvider client={queryClient}>            <Hydrate state={pageProps.dehydratedState}>                <Component {...pageProps} />;                <ReactQueryDevtools initialIsOpen />            </Hydrate>        </QueryClientProvider>    );}export default MyApp;

interface AlbumQuery {    album: {        id: string;        title: string;        user: {            id: string;            name: string;            username: string;            email: string;            company: {                name: string;                bs: string;            };        };        photos: {            data: {                id: string;                title: string;                url: string;            };        };    };}const albumQueryDocument = gql`    query album($id: ID!) {        album(id: $id) {            id            title            user {                id                name                username                email                company {                    name                    bs                }            }            photos {                data {                    id                    title                    url                }            }        }    }`;

export const getStaticProps = async () => {    await queryClient.prefetchQuery(['album'], useAlbumFetcher);    return {        props: {            dehydratedState: dehydrate(queryClient),        },    };};

import type { NextPage } from 'next';import { useQuery, dehydrate } from '@tanstack/react-query';import { request, gql } from 'graphql-request';import { queryClient } from './_app';interface AlbumQuery {    album: {        id: string;        title: string;        user: {            id: string;            name: string;            username: string;            email: string;            company: {                name: string;                bs: string;            };        };        photos: {            data: {                id: string;                title: string;                url: string;            };        };    };}const albumQueryDocument = gql`    query album($id: ID!) {        album(id: $id) {            id            title            user {                id                name                username                email                company {                    name                    bs                }            }            photos {                data {                    id                    title                    url                }            }        }    }`;const useAlbumFetcher = async () =>    await request<AlbumQuery, { id: string }>(        process.env.NEXT_PUBLIC_GRAPHQL_URL,        albumQueryDocument,        {            id: '2',        }    );export const getStaticProps = async () => {    await queryClient.prefetchQuery(['album'], useAlbumFetcher);    return {        props: {            dehydratedState: dehydrate(queryClient),        },    };};const Legacy: NextPage = () => {    const { data } = useQuery<AlbumQuery>(['album'], useAlbumFetcher);    const { album } = data!;    return (        <>            <header style={{ textAlign: 'center' }}>                <h1>Hello GraphQL + React Query !</h1>            </header>            <hr />            <main>                <p style={{ textAlign: 'center', color: 'grey' }}>{JSON.stringify(album)}</p>            </main>        </>    );};export default Legacy;

# code generator core pnpm add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations# code generator react query  pnpm add -D @graphql-codegen/typescript-react-query @graphql-codegen/typescript-graphql-request# code generator yaml loader pnpm add -D yaml-loader

documents: 'graphql/**/!(*.generated).{graphql,ts}'

schema: ${NEXT_PUBLIC_GRAPHQL_URL}

documents: 'graphql/**/!(*.generated).{graphql,ts}'schema: ${NEXT_PUBLIC_GRAPHQL_URL}require:  - ts-node/registergenerates:  graphql/generated.ts:    plugins:      - typescript      - typescript-operations      - typescript-react-query    config:      interfacePrefix: 'I'      typesPrefix: 'I'      skipTypename: true      declarationKind: 'interface'      noNamespaces: true      pureMagicComment: true      exposeQueryKeys: true      exposeFetcher: true      withHooks: true      fetcher: graphql-request

{    ...    "scripts": {        ...        "generate:gql": "graphql-codegen --require dotenv/config --config codegen.yml dotenv_config_path=.env.local"    },    ...}

query album($id: ID!) {    album(id: $id) {        id        title        user {            id            name            username            email            company {                name                bs            }        }        photos {            data {                id                title                url            }        }    }}

. graphql/    album.graphql pages/    _app.tsx    index.tsx    legacy.tsx ...   codegen.yml next-constants.d.ts package.json ...

pnpm generate:gql Parse Configuration Generate outputs

const { data } = useAlbumQuery(gqlClient, { id: '3' });

await queryClient.prefetchQuery(        useAlbumQuery.getKey({ id: '3' }),        useAlbumQuery.fetcher(gqlClient, { id: '3' })    );

import type { NextPage } from 'next';import { dehydrate } from '@tanstack/react-query';import { GraphQLClient } from 'graphql-request';import { useAlbumQuery } from '../graphql/generated';import { queryClient } from './_app';const gqlClient = new GraphQLClient(process.env.NEXT_PUBLIC_GRAPHQL_URL);export const getStaticProps = async () => {    await queryClient.prefetchQuery(        useAlbumQuery.getKey({ id: '2' }),        useAlbumQuery.fetcher(gqlClient, { id: '2' })    );    return {        props: {            dehydratedState: dehydrate(queryClient),        },    };};const New: NextPage = () => {    const { data } = useAlbumQuery(gqlClient, { id: '2' });    const { album } = data!;    return (        <>            <header style={{ textAlign: 'center' }}>                <h1>Hello GraphQL + React Query !</h1>            </header>            <hr />            <main>                <p style={{ textAlign: 'center', color: 'grey' }}>{JSON.stringify(album)}</p>            </main>        </>    );};export default New;