Provide mutation context to mutationFn

[momme-rtf]

Since the onMutate function offers a place for preprocessing I'd find it helpful if not only the onError, onSuccess , ... callbacks receive the context (returned by the onMutate) as an input parameter but also the mutationFn.

[TimeRaider]

Would it be possible to resurrect this PR #7076?

I've found context to be useful for dependency injection (just like React Context) and it works for queries, but not for mutation unfortunately.

Consider the following scenario:

queryFn uses an instance of a GraphQL client that can only be instantiated inside of React component tree. Instead of having to passing it down as one of the queryFn variables it can be read from context.meta.

For that we can use module declaration:

import '@tanstack/react-query';
import { GraphQLClient } from 'graphql-request';

interface Meta {
  graphQLClient: GraphQLClient;
}

declare module '@tanstack/react-query' {
  interface QueryMeta extends Meta {}
  interface MutationMeta extends Meta {}
}

Then have a top-level provider:

import React, { type PropsWithChildren } from 'react';
import {
  QueryClientProvider as ReactQueryClientProvider,
  useQueryClient,
} from '@tanstack/react-query';

import {
  type GraphqlClient,
  GraphQLClientProvider,
  useGraphQLClient,
} from '@utils/graphql';
import { queryClient as queryClientDefault } from '@utils/queryClient';

const QueryClientProviderBase = ({
  children,
  graphqlClient,
}: PropsWithChildren<{
  graphqlClient?: GraphqlClient;
}>) => {
  const graphQLClientDefault = useGraphQLClient();
  const queryClient = useQueryClient();
  const { queries = {}, mutations = {} } = queryClient.getDefaultOptions();

  queryClient.setDefaultOptions({
    queries: {
      ...queries,
      meta: {
        ...queries.meta,
        graphQLClient: graphqlClient || graphQLClientDefault,
      },
    },
    mutations: {
      ...mutations,
      meta: {
        ...mutations.meta,
        graphQLClient: graphqlClient || graphQLClientDefault,
      },
    },
  });

  return <>{children}</>;
};

export const QueryClientProvider = ({
  children,
  graphqlClient,
  queryClient = queryClientDefault,
}: PropsWithChildren<{
  graphqlClient?: GraphqlClient;
  queryClient?: typeof queryClientDefault;
}>) => {
  return (
    <ReactQueryClientProvider client={queryClient}>
      <GraphQLClientProvider>
        <QueryClientProviderBase graphqlClient={graphqlClient}>
          {children}
        </QueryClientProviderBase>
      </GraphQLClientProvider>
    </ReactQueryClientProvider>
  );
};

And this is how we generate query options:

import { queryOptions } from '@tanstack/react-query';

import { graphql } from '../../gql';

const document = graphql(/* GraphQL */ `
  query Entities {
    entities {
      id
      name
    }
  }
`);

export const getEntitiesQueryOptions = () =>
  queryOptions({
    queryKey: ['entities'],
    queryFn: ({ meta: { graphQLClient } }) =>
      graphQLClient.request({
        document,
      }),
  });

This way in our tests and storybooks we can swap the implementation of graphQLClient by wrapping components with a different provider.

Now as I've mentioned it works with queries, but not for mutations.

Also it would be great to have mutationOptions just like we have queryOptions for this.

What do you think?

[dovranJorayev]

It is very helpful function to provide better in term of DX Dependency injection. Because we also use our own http client within a company, so pass it to the context will solve problems with SSR and testing. Because http client has own internal state for storing access token in memory and app need to be written as isomorphic we can not use global accessible singleton instance and we can not use for all of stuff react context API