Is there a way to ignore queryKey parameters?

[cloud-walker]

Hi guys, I'm trying to implement optimistic updates, but I think I have a queryKey related issue.

Somewhere in my app I have the following useQuery usage:

import {useQuery} from 'react-query'

const TodosList = () => {
  // ...
  const params = {limit, status, author}
  const queryInstance = useQuery(['todos', params], getTodos.bind(null, params), {})
  // ...
}

Then in another part of the app (like a single todo page for example, and the TodosList is unmounted), I have a useMutation that I want to implement optimistic update mechanism not only for the query of the current page, but also for the one inside TodosList, but I don't have access to all the params (limit, status and author).

import {useMutation} from 'react-query'

const TodoDetails = () => {
  // ...
  const mutationInstance = useMutation(updateTodo, {
    onMutate: async (newTodo) => {
       // here I want to do setQueryData, to queryKey == "todos", without specifying the params
      queryClient.setQueryData('todos', prevTodos.map(todo => todo.id == newTodo.id ? {...todo, ...newTodo} : todo))

      // ...
    },
    onError: () => {
       // ....
    },
    onSettled: () => {
       // ....
    },
  })
  // ...
}

Thanks in advance!

[TkDodo]

to identify a query, you need all its params I believe. setQueryData does not work fuzzily.

I think you'd need to lift those params up to a place where they are always accessible.

[cloud-walker]

Thanks for the reply!

I think you'd need to lift those params up to a place where they are always accessible.

I suspected that. I'm not super happy tho, It means that I have to lift page related parameters into a global state, that I was trying to avoid. It also mean that if I have different version of the same page (but with different parameters) I have to save then an array of queryKeys (with their own rollback logic also I guess) 😢

[TkDodo]

I like to use the url / router for state like that and retrieve them via useParams() whenever I need them:

/myPage?limit=10&status=open

[IvanCoronado]

Why can't we use a predicate for setQueryData like in cancelQueries, removeQueries...? :S

[TkDodo]

you can use setQueriesData

[IvanCoronado]

oh makes sense! works perfectly!

thanks you!