Mutating reactive query keys

[mirabledictu]

Say you have this useQuery composable:

export function usePost(postId: ComputedRef<string>) {
  return useQuery<Response>(['posts', { postId }], () => {
    return axios.post(`/api/posts/${postId.value}`);
  });
}

as you can see, the postId argument is a ComputedRef so that the query is reactive too.

And to mutate a post, you also have to pass a ComputedRef instead of just the postId:

export const useUpdatePost = () => {
  return useMutation((body) => axios.put(`/api/posts/${body.postId}`, {...body}),
    {
      onMutate: async (variables) => {
        const queryKey = ['posts', { postId: ComputedRef<variables.postId> }];

        await queryClient.cancelQueries(queryKey);

        const previousData = queryClient.getQueryData(queryKey);

        // Optimistically update to the new value
        if (previousData) {
          queryClient.setQueryData(queryKey, {
            // updated data
          });
        }

        return {
          previousData,
        };
      },
      onError: (_error, variables, context: any) => {
        if (context?.previousData) {
          queryClient.setQueryData(
            ['posts', { postId: ComputedRef<variables.postId> }],
            context.previousData
          );
        }
      },
      onSettled: (_data, _error, variables, _context) => {
        queryClient.invalidateQueries(['posts', { postId: ComputedRef<variables.postId> }]);
      },
    }
  );
};

Am I doing this correct? Do we need to wrap it again in a ComputedRef/Ref so that the query key is the same? Thanks!

[DamianOsipiuk]

Hi,
I might not have a full context of your example so take it with a grain of salt 😅

I do not see why you would need reactivity in this example.
Since mutation is called exclusively on some user action, you can unwrap the reactive property while calling it and it should still work.
The only reactive thing that you may want to make is the mutation options if those are depending on the context and might change over time.

As for your example, I would go with:

export const useUpdatePost = () => {
  return useMutation((body) => axios.put(`/api/posts/${body.postId}`, {...body}),
    {
      onMutate: async (variables) => {
        const queryKey = ['posts', { postId: variables.postId }];

        await queryClient.cancelQueries(queryKey);

        const previousData = queryClient.getQueryData(queryKey);

        // Optimistically update to the new value
        if (previousData) {
          queryClient.setQueryData(queryKey, {
            // updated data
          });
        }

        return {
          previousData,
        };
      },
      onError: (_error, variables, context: any) => {
        if (context?.previousData) {
          queryClient.setQueryData(
            ['posts', { postId: variables.postId }],
            context.previousData
          );
        }
      },
      onSettled: (_data, _error, variables, _context) => {
        queryClient.invalidateQueries(['posts', { postId: variables.postId }]);
      },
    }
  );
};

and call it like this:

const postId = ref(1) // or computed
const updatePost = useUpdatePost()

onClick() {
  updatePost.mutate({postId: postId.value, ...})
}

Also if you are using it with a combination with useQuery you might want to make the whole query key reactive, like:

const postId = ref(1) // or computed
const query = useQuery(reactive(['posts', { postId }]), fetchFn)

I did not test the above, so in case it does not work, let me know. I will try to prepare some codesandbox example.

[mirabledictu]

I actually

For the first part, yes.

For the second part, no.

const postId = computed(() => someRef.value ? someRef.value.id : null)
useQuery(['posts', { postId }], queryFn)

This would not work as the query key would contain a ref, which would translate to gibberish in the cache (stringify).

What you want to do is:

const postId = computed(() => someRef.value ? someRef.value.id : null)
useQuery(reactive(['posts', { postId }]), queryFn)

...

queryClient.invalidateQueries(['posts', { postId: variables.postId }]);

Since reactive will automatically translate your ref/computed to actual js immutable array/object that is reactive and properly stringify it

I actually am not getting mutation updates with this. Is it because I'm using Nuxt? I'll try to recreate and send sandbox here

[mirabledictu]

Here's a sandbox link of a very simple recreation: https://codesandbox.io/s/vue-query-test-tiqbx

Try to mutate and you will get an updated todo.

Then try to uncomment the other one and no update will apply. That's exactly my code above

    {
      onMutate: (id) => {
        // This is working
        const queryKey = ["todo", id];

        // This is not
        // const queryKey = ["todo", id.value];

        const previousData = queryClient.getQueryData(queryKey);

        if (previousData) {
          console.log("previousData", previousData);
          queryClient.setQueryData(queryKey, newValue);
        }
      }
    }

Even if you wrap the queryKey in a reactive, you'll still get the same results

[DamianOsipiuk]

Hmm, I think the issue here is that you are not using reactive for the queryKey and passing a ref directly in the array.

Check this sandbox: https://codesandbox.io/s/vue-query-test-forked-fkxll?file=/src/components/Todo.vue

Besides changing the queryKey computation, I also added DevTools and id increment on click.

[mirabledictu]

Hmm, I think the issue here is that you are not using reactive for the queryKey and passing a ref directly in the array.

Check this sandbox: https://codesandbox.io/s/vue-query-test-forked-fkxll?file=/src/components/Todo.vue

Besides changing the queryKey computation, I also added DevTools and id increment on click.

Thanks for this. So if I want to invalidate this

const id = ref(1)
useQuery(reactive(["todo", { id }]))

I have to do this, right?

{
  onSettled: (_data, _error, id, _context) => {
    queryClient.invalidateQueries(
      reactive(["todo", { id }])
    );
  },
}

[DamianOsipiuk]

So this:

useQuery(reactive(["todo", { id }]))

Should actually serialize to something like ["todo",{"id":1}]. You can check that in the DevTools

Therefore you should be able to invalidate it via any of the below:

• queryClient.invalidateQueries(reactive(["todo", { id }]));
• queryClient.invalidateQueries(["todo", { id: id.value }]);
• queryClient.invalidateQueries(["todo", { id: 1 }]);

Depending on the usage context and if you need reactivity. But using the first example should work for you in most situations.