React Query Client Preset

[0-don]

I just wanted to share my react query client configuration because I couldnt find anything in the docs

React Query Client Configuration with GraphQL Codegen

This configuration provides custom hooks for handling GraphQL requests using React Query and GraphQL Codegen.

Functions and Hooks

• getKey(document): Returns the name of the first definition in the GraphQL document.

• useGqlQuery(document, variables, options): A wrapper around useQuery from React Query for GraphQL queries.

• useGqlMutation(document, options): A wrapper around useMutation from React Query for GraphQL mutations.

• useGqlInfinite(document, variables, options): A wrapper around useInfiniteQuery from React Query for infinite loading of GraphQL data.

• customFetcher(document, variables, options, withHeaders): Fetches data from the GraphQL server. Throws an error if the server returns any errors.

Parameters

• document: A GraphQL document.
• variables: Variables for the GraphQL request (optional).
• options: Options for the React Query hook or headers for the fetch request (optional).
• withHeaders: A flag indicating whether to return the headers with the data (optional, default is false).

Usage

Use the custom hooks in your components as you would use the standard React Query hooks, passing in your GraphQL documents and any necessary variables or options.

import { type TypedDocumentNode } from "@graphql-typed-document-node/core";
import {
  UseInfiniteQueryOptions,
  UseMutationOptions,
  UseQueryOptions,
  useInfiniteQuery,
  useMutation,
  useQuery,
} from "@tanstack/react-query";
import { DirectiveDefinitionNode } from "graphql";

export const getKey = <TData = any, TVariables = unknown>(
  document: TypedDocumentNode<TData, TVariables>,
) => [(document.definitions[0] as DirectiveDefinitionNode)?.name?.value];

export const useGqlQuery = <
  TData = any,
  TVariables = unknown,
  TError = unknown,
>(
  document: TypedDocumentNode<TData, TVariables>,
  variables?: TVariables,
  options?: UseQueryOptions<TData, TError, TData>,
) =>
  useQuery<TData, TError, TData>(
    [...getKey(document), variables],
    customFetcher(document, variables),
    options,
  );

export const useGqlMutation = <
  TData = any,
  TVariables = unknown,
  TError = unknown,
  TContext = unknown,
>(
  document: TypedDocumentNode<TData, TVariables>,
  options?: UseMutationOptions<TData, TError, TVariables, TContext>,
) =>
  useMutation<TData, TError, TVariables, TContext>(
    getKey(document),
    (variables) => customFetcher<TData, TVariables>(document, variables)(),
    options,
  );

export const useGqlInfinite = <
  TData = any,
  TVariables = unknown,
  TError = unknown,
>(
  document: TypedDocumentNode<TData, TVariables>,
  variables: TVariables,
  options?: UseInfiniteQueryOptions<TData, TError, TData>,
) =>
  useInfiniteQuery<TData, TError, TData>(
    [`${getKey(document).join("")}.infinite`, variables],
    (metaData) =>
      customFetcher<TData, TVariables>(document, {
        ...variables,
        ...(metaData.pageParam ?? {}),
      })(),
    options,
  );

export const customFetcher = <TData, TVariables, T extends boolean = false>(
  document: TypedDocumentNode<TData, TVariables>,
  variables?: TVariables,
  options?: RequestInit["headers"],
  withHeaders: T = false as T,
): (() => T extends false
  ? Promise<TData>
  : Promise<{ data: TData; headers: Headers }>) => {
  return async () => {
    const res = await fetch(process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT, {
      method: "POST",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
        ...options,
      },
      body: JSON.stringify({
        query: print(document),
        variables,
      }),
      // body: JSON.stringify({
      //   variables,
      //   extensions: {
      //     persistedQuery: {
      //       version: 1,
      //       sha256Hash: (document as any)["__meta__"]["hash"],
      //     },
      //   },
      // }),
    });

    const { data, errors } = await res.json();
    const { headers } = res;

    if (errors) {
      throw new Error(errors);
    }
    return withHeaders ? { data, headers } : data;
  };
};

[onionhammer]

Pretty sure the docs don't event have valid typescript..

https://the-guild.dev/graphql/codegen/docs/guides/react-vue#appendix-i-react-query-with-a-custom-fetcher-setup

Doesnt include any info about doing mutations