T
TanStack•2y ago
graceful-blue

useMutation - updating a single entry in onMutate

I am trying to follow the tutorial on tanstack for doing optimistic updates. I cannot make their example work in my app for updating a single entry in the onMutate function. I am following the guide here: https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates for "Updating a single todo".
Optimistic Updates | TanStack Query Docs
React Query provides two ways to optimistically update your UI before a mutation has completed. You can either use the onMutate option to update your cache directly, or leverage the returned variables to update your UI from the useMutation result. Via the UI
5 Replies
graceful-blue
graceful-blueOP•2y ago
In their code, they have this line of code: queryClient.setQueryData(['todos', newTodo.id], newTodo).
other-emerald
other-emerald•2y ago
okay but the guide is fine, so ... share some code? Your own codesandbox reproduction would be best
graceful-blue
graceful-blueOP•2y ago
and this is mine: 
const { mutateAsync: updateChemicalMutation } = useMutation({
    mutationFn: updateChemical,
    onMutate: async (updatedChemical: { cID: string; cName: string }) => {
        console.log({ updatedChemical });
        const correctUpdatedChemical = {
            id: updatedChemical.cID,
            description: updatedChemical.cName
        };
        console.log({ correctUpdatedChemical });
        // Cancel any outgoing refetches
        // (so they don't overwrite our optimistic update)
        await queryClient.cancelQueries({
            queryKey: ['chemicals', correctUpdatedChemical.id]
        });
    
            // Snapshot the previous value
        const previousChemical = queryClient.getQueryData([
            'chemicals',
            correctUpdatedChemical.id
        ]);

        // Optimistically update to the new value
        console.log('setting query data...');
        console.log({ chemicals });
        queryClient.setQueryData(
            ['chemicals', correctUpdatedChemical.id],
            correctUpdatedChemical
        );
const { mutateAsync: updateChemicalMutation } = useMutation({
    mutationFn: updateChemical,
    onMutate: async (updatedChemical: { cID: string; cName: string }) => {
        console.log({ updatedChemical });
        const correctUpdatedChemical = {
            id: updatedChemical.cID,
            description: updatedChemical.cName
        };
        console.log({ correctUpdatedChemical });
        // Cancel any outgoing refetches
        // (so they don't overwrite our optimistic update)
        await queryClient.cancelQueries({
            queryKey: ['chemicals', correctUpdatedChemical.id]
        });
    
            // Snapshot the previous value
        const previousChemical = queryClient.getQueryData([
            'chemicals',
            correctUpdatedChemical.id
        ]);

        // Optimistically update to the new value
        console.log('setting query data...');
        console.log({ chemicals });
        queryClient.setQueryData(
            ['chemicals', correctUpdatedChemical.id],
            correctUpdatedChemical
        );
my understanding is that setQueryData call will update the chemicals state array entry at the given id with correctUpdatedChemical I know when i did something like this it worked, prev => prev.map(c => c.id === correctUpdatedChemical.id ? correctUpdatedChemical : c)}
other-emerald
other-emerald•2y ago
are you writing to a cache entry that contains an array or that just contains a single object? Sorry this is just easier to understand if you do the work and provide a sandbox
graceful-blue
graceful-blueOP•2y ago
I can try the sandbox, its a fairly big project. This is my 'get' function in the same component: 
const {
        data: chemicals,
        isLoading,
        error
    }: {
        data: { id: string; description: string }[];
        isLoading: boolean;
        error: string;
    } = useQuery({
        queryKey: ['chemicals']
    });
const {
        data: chemicals,
        isLoading,
        error
    }: {
        data: { id: string; description: string }[];
        isLoading: boolean;
        error: string;
    } = useQuery({
        queryKey: ['chemicals']
    });
but that is then passed down a couple components to be displayed in a table oh wait your question about "writing to a cache array" didn't make sense to me but then I did remember something I have this in the same component: 
const categories: { id: string; category: string }[] = chemicals?.map(
        (c: { id: string; description: string }) => {
            return { id: c.id.toString(), category: c.description };
        }
    );
const categories: { id: string; category: string }[] = chemicals?.map(
        (c: { id: string; description: string }) => {
            return { id: c.id.toString(), category: c.description };
        }
    );
that is what is getting passed down to the table component and that is not state so I assume is not updating I am converting the field names to id and category so I can use them in my generic SimpleCategoriesTable component. I should just figure out how to change them right away in the get function and stop dealing with multiple arrays.

Did you find this page helpful?