Best Practices for Using tanstack-react-query with GraphQL in a Monorepo Structure

// apps/main/src/features/query.js
import { QueryClient, QueryCache, QueryClientProvider } from "@tanstack/react-query";
import { getToggleIsLoggedInAction } from "shared-features/login";
export { QueryClientProvider };
import { request } from "graphql-request";

export const rq = (requestDoc, variables) =>
  request(import.meta.env.VITE_GQL_URL, requestDoc, variables).catch(
    (error) => {
      //prepare the error
      return Promise.reject(preparedError);
    }
  );

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
    },
  },
  queryCache: new QueryCache({
    onError: (error) => {
      if (error?.response?.status === 401) {
        getToggleIsLoggedInAction()(false);
      }
    },
  }),
});

import { useQuery } from "@tanstack/react-query";
import { gql } from "graphql-request";
import { rq } from "@/features/query";

const query = gql`
  query Customers($filter: CustomersFilterInput!) {
    customers(filter: $filter) {
      fName
      lName
    }
  }
`;
export function useCustomerQuery({ filter }) {
  return useQuery({
    queryKey: ["customers", "list", filter],
    queryFn: async () => {
      return rq(query, { filter }).then((data) => data.customers);
    },
  });
}

export function useCustomerQuery({ filter }) {
  const quClient = useQueryClient();
  return useQuery({
    queryKey: ["customers", filter],
    queryFn: quClient.injectedQueryFn(props).then((data) => data.customers),
  });
}