Access muationKey in mutationFn

[badsyntax]

Hi there.

For queries, we can access the queryKey in the queryFn, but this is not the case for mutationFn.

The only argument passed to the mutationFn is the mutation variables.

Why is the mutationKey not passed to the mutationFn?

Context:

• I'm using https://www.graphql-code-generator.com/plugins/typescript-react-query to generate react-query hooks
• I'm writing E2E tests with playwright and I need a way to identity GraphQL requests in order to intercept them
• To identity requests, I'm setting the operationName property in the graphql request body, within my generic "fetcher"
  • For queries, I'm using the query key for the operation name.
  • I don't have a solution for setting the operationName for mutations, as I can't get access to the mutationKey within the mutationFn

Here's my generic fetcher:

export function useFetchData<TData, TVariables>(
  query: string,
  headers?: RequestInit['headers']
): (
  variables?: TVariables,
  opts?: {
    signal?: AbortSignal;
    queryKey?: QueryKey;
    mutationKey?: MutationKey; // <- it would be awesome if `mutationKey` is passed here
  }
) => Promise<TData> {
  const tenantId = useTenantId();
  return async (variables, opts) => {
    const accessToken = await tokenRequester.getToken();
    const res = await fetch(config.API.WEB_GRAPHQL_URL as string, {
      method: 'POST',
      body: JSON.stringify({
        query,
        variables,
        // This only works for queries, not for mutations
        operationName: getOperationName(opts?.queryKey),
      }),
      signal: opts?.signal,
      headers: {
        ...headers,
        'Content-Type': 'application/json',
        Authorization: `Bearer ${accessToken}`,
        TenantId: tenantId,
      },
    });

    const json = await res.json();

    if (json.errors) {
      const { message } = json.errors[0];

      throw new Error(message);
    }

    return json.data;
  };
}

Example generated query hook:

export const useGetRolesQuery = <TData = GetRolesQuery, TError = ResponseError>(
  variables?: GetRolesQueryVariables,
  options?: UseQueryOptions<GetRolesQuery, TError, TData>
) =>
  useQuery<GetRolesQuery, TError, TData>(
    variables === undefined ? ['GetRoles'] : ['GetRoles', variables],
    useFetchData<GetRolesQuery, GetRolesQueryVariables>(GetRolesDocument).bind(
      null,
      variables
    ),
    options
  );

Example generate mutation hook:

export const useAddRoleMutation = <TError = ResponseError, TContext = unknown>(
  options?: UseMutationOptions<
    AddRoleMutation,
    TError,
    AddRoleMutationVariables,
    TContext
  >
) =>
  useMutation<AddRoleMutation, TError, AddRoleMutationVariables, TContext>(
    ['AddRole'],
    useFetchData<AddRoleMutation, AddRoleMutationVariables>(AddRoleDocument),
    options
  );

Thoughts?

[TkDodo]

Why is the mutationKey not passed to the mutationFn?

because we already pass variables to the mutation function, which is controlled by the user. It can be just a string as well, so there is no context for us to inject. For queries, we have the queryFunctionContext that is provided by react-query, which contains all sorts of things.

it would be possible with a breaking change - to always inject a mutationFnContext, and maybe extract the variables via { variables}, but it would break the most easy use-cases, like:

const updatePost = (text: string) => axios.post(...)
useMutation(updatePost)

that would need to become:

const updatePost = (text: string) => axios.post(...)
useMutation(({ variables }) => updatePost(variables))

I'm writing E2E tests with playwright and I need a way to identity GraphQL requests in order to intercept them

not sure why you would need a code change for that, but I also don't know much about graphQL. Isn't the solution just to stub the request on network level?

[badsyntax]

Thanks for the reply (and apologies for my belated response). I know it would be inconsistent, but would you consider passing mutationFnContext (excluding variables) as the second argument to mutationFn?

not sure why you would need a code change for that, but I also don't know much about graphQL. Isn't the solution just to stub the request on network level?

Also not entirely sure i understand the suggestion, but yea, I am attempting to stub the request at the network level, using Playwright's response interception. The thing with GraphQL, is that it's kinda hard to stub, because every request to your GraphQL endpoint has exactly the same request method and url, eg: POST /graphql. The only difference between different GraphQL requests what's in the request body. This is why adding a key called operationName to the request body is a useful approach for identifying requests. If I could access mutationKey in my mutationFn, then I could use the mutationKey as my operationName as a way to identify requests, so that I can stub them.

(Btw I'm not really pushing for this change. I understand it's not ideal to introduce this change and I guess i'm just curious as the reason why we can't access mutationKey. Thanks again for your reply.)

[TkDodo]

The thing with GraphQL, is that it's kinda hard to stub, because every request to your GraphQL endpoint has exactly the same request method and url

oh yes, that sucks :( I'm used to rest where this isn't a problem 😅

I know it would be inconsistent, but would you consider passing mutationFnContext (excluding variables) as the second argument to mutationFn?

I actually think that is not a bad idea, however:

useMutation((text: string, context: MutationFnContext) => axios.post(...))

we wouldn't get type inference for the context like we would with queries, because we'll always need to add a type annotation for the variables. If we go with just putting in the mutationKey and meta though, it should be fine. and onMutate would also need to get that - and maybe all callbacks that also get variables passed 😅 .

anyways, this would be a non-breaking change, so if you want to go ahead with a PoC pull request, I'd be happy to take a look

[badsyntax]

Thanks @TkDodo, I'll see if i get a PoC PR together.

[zz-james]

I can't see this change so did it happen? What is confusing me right now is that I set a default query function for queries and use the key to determine the end point, when I set a default mutation function it doesn't get the key so how can I use it as the default mutation function if I can't determine the endpoint because the key is not in the params passed to it?

[badsyntax]

I never got around to sending a PR :(

[zz-james]

Well today I've decided that having a default function for mutations isn't best for me anyhow, still need to pass an object but that's simple,

[Birkbjo]

Just an update if anyone is still looking to do something similar. It seems like this is possible by using the this-context in the mutateFn.

    function mutateFn(variables) {
        const { mutationKey } = this
        // gather params from mutationKey
        const { params } = mutationKey[1]
        return engine.mutate(mutationObj, {
            variables: { ...params, ...variables },
        })
    }

Haven't found any documentation of this, so might break - so use at your own risk :)

[nelsieborja]

I also need the same flexibility on mutationFn but in my case for setting some initial variables (just coz unlike queryFn, mutationFn only allows access to variables). Here's how I achieved it (simplified version):

I don't want to define mutationFn in each and every mutation so I set a default one in QueryClient:

new QueryClient({
  defaultOptions: {
      mutations: {
           mutationFn: async variables => {
               const { endpoint, ...body } = variables
               // ...
           }
      }
  }
})

Abstracted useMutation to modify the mutate method so that it accepts some initial variables:

function useDataMutation<
    ResponseData,
    RequestVariables extends Record<string, unknown>
>({
    endpoint, 
    method = 'POST', 
    mutationKey,
    mutationOptions,
}: {
    endpoint: string;
    method?: HttpMethod;
    mutationKey: string,
    mutationOptions?: UseMutationOptions<ResponseData, RequestVariables>
}) {
    const { mutate, ...mutation } = useMutation([mutationKey], mutationOptions)
    return {
        ....mutation.
        mutate: (variables: RequestVariables) => mutate({
            ...variables,
            endpoint,
            method,
            // ...
        })
    }
}

Mutate variables has to be in Object format and TS helps enforce it. Use useDataMutation for different endpoints:

const add = useDataMutation('/add')
const add = useDataMutation('/delete', 'PUT')