queryClient.getQueryData to get item from a list?

[t-zander]

Hello.
I see in your example you are getting one item from a list https://react-query.tanstack.com/guides/optimistic-updates#updating-a-single-todo

useMutation(updateTodo, {
   // When mutate is called:
   onMutate: async newTodo => {
     // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
     await queryClient.cancelQueries(['todos', newTodo.id])
 
     // Snapshot the previous value
     const previousTodo = queryClient.getQueryData(['todos', newTodo.id]) <--- HERE
 ...
 })

I am trying to do the same but with no luck.

I have a query with a key, like this

const { data, isLoading, error } = useQuery(
    ['technologies'],
    getTechnologies
  );

and I have a mutation where I am trying to get one item, like this:

const { mutate, isLoading: isUpdatingTechPriority } = useMutation(
    updateTechnologyPriority,
    {
      mutationKey: '',
      onMutate: async ({ technologyId, priority }: UpdatePriorityData) => {
        await queryClient.cancelQueries(['technologies', technologyId]);

        const previousTechnology = queryClient.getQueryData<Technology>(
          ['technologies', technologyId] <--- HERE
        );
...

Did I misunderstand your example, or should my list be in a definite shape? Because if I do it this way, it will always give undefined

If I do

const previousTechnology = queryClient.getQueryData<Technology>(
          ['technologies'] <--- HERE
        );

It will work, but will give entire list, but I want to get one item.
Is it possible? Thanks in advance

[mfpopa]

You cannot retrieve data from the query cache using a query key that has never been used in an actual query. I presume you have not defined a query using the ['technologies', technologyId] key, you only have a query using the ['technologies'] key.

The official example mutate an item that was returned by a query that fetched that specific item. What you are trying to do is mutate an item that was returned by a query that fetched a collection of items.

What may work for you:

const previousTechnology = queryClient.getQueryData(['technologies']).find(technology => technology.id === technologyId);

[prime0x2]

what if I have the vice-versa? I have query with ["list", queryParams] and now I'm trying to get the data with getQueryData using ["list"] but it's not working. any idea?

[jbalatero]

This is what I did on v4

queryClient.getQueryData(["list"], {
    queryKey: ["list"], // yup, this is needed
    exact: false,
    type: "active" // values are "all", "active", "inactive". Experiment accordingly
});