T
TanStack•12mo ago
absent-sapphire

queryOptions counterpart for useMutation?

Hello everyone, I recently discovered that you can share configurations between queries using queryOptions as mentioned in this section of the documentation: https://tanstack.com/query/v5/docs/framework/react/guides/query-options I was wondering if there was a counterpart for this for useMutation.
Query Options | TanStack Query React Docs
One of the best ways to share queryKey and queryFn between multiple places, yet keep them co-located to one another, is to use the queryOptions helper. At runtime, this helper just returns whatever yo...
7 Replies
mute-gold
mute-gold•12mo ago
absent-sapphire
absent-sapphireOP•12mo ago
What I’m trying to do is something similar to this example but with mutations: 
import { queryOptions } from '@tanstack/react-query'

function groupOptions(id: number) {
  return queryOptions({
    queryKey: ['groups', id],
    queryFn: () => fetchGroups(id),
    staleTime: 5 * 1000,
  })
}

// usage:

useQuery(groupOptions(1))
useSuspenseQuery(groupOptions(5))
useQueries({
  queries: [groupOptions(1), groupOptions(2)],
})
queryClient.prefetchQuery(groupOptions(23))
queryClient.setQueryData(groupOptions(42).queryKey, newGroups)
import { queryOptions } from '@tanstack/react-query'

function groupOptions(id: number) {
  return queryOptions({
    queryKey: ['groups', id],
    queryFn: () => fetchGroups(id),
    staleTime: 5 * 1000,
  })
}

// usage:

useQuery(groupOptions(1))
useSuspenseQuery(groupOptions(5))
useQueries({
  queries: [groupOptions(1), groupOptions(2)],
})
queryClient.prefetchQuery(groupOptions(23))
queryClient.setQueryData(groupOptions(42).queryKey, newGroups)
It’s only a helper function that contains typing but I don’t seem to find the equivalent in mutations.
mute-gold
mute-gold•12mo ago
Can you explain what you are trying to do?
generous-apricot
generous-apricot•12mo ago
Dominik has said he sees no reason to create mutationOptions. You could try to demonstrate your use case and see if he’ll reconsider
absent-sapphire
absent-sapphireOP•12mo ago
I am trying to create a utility function that I can use between mutations where I only need to specify the id. Something like this would be Ideal: 
function groupMutationOptions(documentId: string) {
    return mutationOptions({
        mutationFn: () => updateDocument(id)
        onSuccess: () => {
           console.log("document updated successfully")
        }     
    })
}

const usersMutation = useMutation(groupMutationOptions("1"))
const postsMutation = useMutation(groupMutationOptions("2"))
function groupMutationOptions(documentId: string) {
    return mutationOptions({
        mutationFn: () => updateDocument(id)
        onSuccess: () => {
           console.log("document updated successfully")
        }     
    })
}

const usersMutation = useMutation(groupMutationOptions("1"))
const postsMutation = useMutation(groupMutationOptions("2"))
If this were to be possible one could group success and error callbacks instead of having to rewrite that logic everywhere.
continuing-cyan
continuing-cyan•12mo ago
I'd check out this article: https://tkdodo.eu/blog/mastering-mutations-in-react-query But you can create a reusable function to do what I think you are looking for? 
const useUpdateDocument = () => {
    const queryClient = useQueryClient();

    return useMutation({
        mutationFn: ({ documentID }: { documentID: string }) =>
            updateDocument(documentID),
        onSuccess: async () => {
            // As an example for your callbacks
            await queryClient.invalidateQueries();
        },
    });
};

const mutation = useUpdateDocument();

const updatedDoc1 = await mutation.mutateAsync({ documentID: '1' });
mutation.mutate({ documentID: '2' });
const useUpdateDocument = () => {
    const queryClient = useQueryClient();

    return useMutation({
        mutationFn: ({ documentID }: { documentID: string }) =>
            updateDocument(documentID),
        onSuccess: async () => {
            // As an example for your callbacks
            await queryClient.invalidateQueries();
        },
    });
};

const mutation = useUpdateDocument();

const updatedDoc1 = await mutation.mutateAsync({ documentID: '1' });
mutation.mutate({ documentID: '2' });
Mastering Mutations in React Query
Learn all about the concept of performing side effects on the server with React Query.
like-gold
like-gold•12mo ago
For mutations, creating a custom hook is a good abstraction because you don't need to share the options with different methods like with queries.

Did you find this page helpful?