How to deal with shared "fetch functionality" for mutations

[Svish]

I've started to move API-data away from Redux and instead fetch via react-query.

For queries this process is super easy, thanks to the possibility of providing a default query function. We have created the convention that the query key is either a string (url of endpoint), or an array with url of endpoint being the first item, and query parameters being the second item. Since I know the baseUrl when I create the QueryClient, I can just use this simple createQueryFn to create a default fetch function:

function createQueryFn(baseUrl): QueryFunction {
  return async ({ queryKey }) => {
    const path = typeof queryKey === 'string' ? queryKey : queryKey[0] + qs(queryKey[1]);
    const res = await fetch(baseUrl + path, { credentials: 'include' });

    if (!res.ok) throw new Error(await res.json());

    return res.json();
  };
}

const queryCache = new QueryCache();
const mutationCache = new MutationCache();

export default function QueryProvider({ baseUrl, children }): React.ReactElement {
  const queryClient = useMemo(
    () =>
      new QueryClient({
        queryCache,
        mutationCache,
        defaultOptions: {
          queries: {
            queryFn: createQueryFn(baseUrl),
          },
        },
      }),
    [baseUrl]
  );

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

Creating shared query hooks for each endpoint is then just a matter of doing this:

export const useGetFoobar = () => useQuery('api/foobar');
export const useGetSearch = (term) => useQuery(['api/search', { term }]);

For mutations on the other hand, I'm very unsure how to make things equally easy. Here's my first mutation hook, with no shared functionality:

export function usePutFoobar(id) {
  const queryClient = useQueryClient();
  const baseUrl = useSelector(state => state.settings.baseUrl);

  return useMutation(
    async (variables) => {
      const tokenRes = await fetch(baseUrl + 'api/antiforgery', { credentials: 'include' });
      const token = await tokenRes.json();

      const res = await fetch(baseUrl + `api/foobar/${id}`, {
          method: 'POST',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
            [token.header]: token.value,
          },
          data: JSON.stringify(variables),
        }
      );

      if (!res.ok) {
        throw new Error(await res.json());
      }

      return res.json()
    },
    {
      onSuccess: () => {
        void queryClient.invalidateQueries(`api/foobar/${id}`);
      },
    }
  );
}

Doing all of this for every mutation we currently have "in" Redux, will be an giant pain. Are there any good examples on how to share "fetch functionality" for mutations when using react-query?

I looked into the mutationFn one can provide to defaultOptions.mutations, which probably could've been perfect, but it only receives the variables you pass when calling mutate. So there's no way to decide which endpoint to target, for example, unless you also pass that in as part of the "variables", but I'd really like to avoid that.

And since the fetch requires the baseUrl, which is only available via the Redux store (since it can't be "locked in" when the QueryClient is created, like I can with the default queryFn, I can't just pull out simple helper functions either.

My goal is that a component just needs to call e.g. usePutSomething(id), and get back a mutate function to call with only the data to put.

Best solution I can come up with so far is to create a custom useMutationFetch hook, or something like that, which gets the baseUrl from the Redux store, and returns a wrapped fetch function of some sort, which is then used within the useMutation hook. Something like this:

export function usePutFoobar(id) {
  const queryClient = useQueryClient();
  const mutationFetch = useMutationFetch();

  return useMutation(
    async (variables) => {
      const res = await mutationFetch(`api/foobar/${id}`, {
          method: 'POST',
          data: variables,
        }
      );

      return res.json()
    },
    {
      onSuccess: () => {
        void queryClient.invalidateQueries(`api/foobar/${id}`);
      },
    }
  );
}

Much better, but still not sure I like it...

Either way, hope someone has some good ideas from their own projects here. Feel like the documentation is very lacking in guidance on this topic of how to prevent duplication related to queries and mutations. For queries there is a little bit thanks to the documentation of the default query function, but other than that, it doesn't really seem to be anything, at least of what I've found so far. The current examples in this repo all seem to define everything more or less inline for each useQuery/useMutation hook, and that's not really doable in a larger application, in my opinion. Keeping keys and fetch behaviour consistent across the app would become difficult I feel. 😕

[TkDodo]

I think with the custom hook you are pretty much almost there yet. You can also abstract that further of course:

const useMyMutation = (key) => {
  const queryClient = useQueryClient();
  const mutationFetch = useMutationFetch();

  return useMutation(
    async (variables) => {
      const res = await mutationFetch(key, {
          method: 'POST',
          data: variables,
        }
      );

      return res.json()
    },
    {
      onSuccess: () => {
        void queryClient.invalidateQueries(key);
      },
    }
  );
}

const usePutFoobar = useMyMutation(`api/foobar/${id}`)

this is then similar to the abstraction that you have on the query level

[Svish]

Yeah, I think something along these lines is what I need to end up with.

But have to say it annoys me a little bit that the default mutationFn is so much less useful than the default queryFn. If it was possible to provide a bit more context when calling useMutation, which the default function would get access to, then I think this could've been done much cleaner. 🤔

[tonyjmartinez]

@TkDodo I have a similar need to use mutationFn to make it easier to use graphql. In the queryFn I'm able to set the gql endpoint and authorization header once, but not able to do this with mutationFn (unless there's a way I haven't figured out yet).

[Svish]

I think maybe all this could be solved if it was possible to communicate some sort of context between the useMutation call and the default mutation function.

Currently the definition of the default mutation function is:

export declare type MutationFunction<TData = unknown, TVariables = unknown> = (variables: TVariables) => Promise<TData>

Where variables is what you pass in when you call mutate. Maybe this could be amended to be e.g.

export declare type MutationFunction<TData = unknown, TVariables = unknown, TContext = unknown> = (variables: TVariables, context: TContext) => Promise<TData>

Which could be used for example like this:

const mutation = useMutation({
  context: { method: 'POST', url: '/api/blog-post' }
  // onMutate, ...
})

Probably should be called something other than context though, since it might be confusing with the optional context returned from onMutate which is passed to onSuccess, onError and onSettled. Maybe could be called metadata or something like that?

[TkDodo]

I think defining a mutationKey and then set default options for that key should work:

 queryClient.setMutationDefaults('my-Key', { mutationFn: myDefaultMethodForThatKey({ method: 'POST', url: '/api/blog-post' })

const mutation = useMutation({
  mutationKey: 'my-Key'
})

[Svish]

The point is to not have a myDefaultMethodForThatKey, but a default fetch for all mutation keys.

[filipkrayem]

Hi. I've got the exact same problem as you. Have you figured out something better?