custom hook for invalidating queries

[kodobrody]

Since many of us only need simple query invalidation upon mutation success, error or settle and (at least for me) using useQueryClient with each mutation seems a bit cumbersome, I came up with simple useInvalidateQueryHook.

type MutationOnHandlersKeys = keyof Pick<MutateOptions, 'onError' | 'onSettled' | 'onSuccess'>;

type QueryKeysObj = Partial<Record<MutationOnHandlersKeys, QueryKey[]>>;

type MutationOnHandlers = Partial<Record<MutationOnHandlersKeys, () => void>>;

type Cur = [keyof MutationOnHandlers, QueryKey[]];

const useInvalidateQueries = (keys: QueryKeysObj) => {
  const queryClient = useQueryClient();

  return Object.entries(keys).reduce((acc: MutationOnHandlers, cur) => {
    const [
      key,
      queryKeys
    ] = cur as Cur;

    acc[key] = () => {
      queryKeys.forEach(queryKey => queryClient.invalidateQueries({ queryKey }));
    };

    return acc;
  }, {});
};

the usage is as following:

const invalidateQueries = useInvalidateQueries({onSuccess: [['authors'], ['posts', id]], ...})

const { mutate } = useMutation({
    mutationFn,
    mutationKey,
    ...invalidateQueries,
  });

[TkDodo]

you might like: https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations