useGraphqlCRUD.ts

import {
  TypedDocumentNode,
  useMutation,
  UseMutationResponse,
  useQuery,
  UseQueryArgs,
  UseQueryResponse,
} from 'urql';

type Data<Document> = Document extends TypedDocumentNode<infer Data>
  ? Data
  : unknown;

type Vars<Document> = Document extends TypedDocumentNode<unknown, infer Vars>
  ? Vars
  : unknown;

export function useGraphqlCRUD<
  Query extends TypedDocumentNode,
  CreateMutation extends TypedDocumentNode,
  DeleteMutation extends TypedDocumentNode
>({
  query,
  context,
  variables,
  createMutation,
  deleteMutation,
}: {
  query: Query;
  variables: Vars<Query>;
  context: UseQueryArgs['context'];
  createMutation: CreateMutation;
  deleteMutation: DeleteMutation;
}) {
  const [response] = useQuery({
    query,
    variables,
    context,
  }) as UseQueryResponse<Data<Query>, Vars<Query>>;

  const [, createOperation] = useMutation(
    createMutation
  ) as UseMutationResponse<Data<CreateMutation>, Vars<CreateMutation>>;

  const [, deleteOperation] = useMutation(
    deleteMutation
  ) as UseMutationResponse<Data<DeleteMutation>, Vars<DeleteMutation>>;

  return {
    response,
    createOperation,
    deleteOperation,
  };
}
                                                         

usage example

  const {
    response,
    createOperation: createProjectMutation,
    deleteOperation: deleteProjectMutation,
  } = useGraphqlCRUD({
    query: MeDocument,
    variables: {},
    context: meQueryContext,
    createMutation: CreateProjectDocument,
    deleteMutation: DeleteProjectDocument,
  });