Help with optimistic updates

[ConnorMarble]

I am following the example here, but I am having trouble filling in the blanks. Right now I have a gql query to grab all todos from my server and it works. However I am trying to update a single todo item using the example in the link, but in my cache I have only a single query called ["Todos"]. So the value previousTodo comes out undefined.
Is there a full project with all of these use cases available? Or does anyone know how to resolve this issue? Thanks!

[waleed-alfaifi]

Hello @ConnorMarble,

Can you share a sandbox with with your code? That would make it easier to identify the problem.
As an initial suggestion, make sure you using the same queryKey when retrieving the cache as the one used in defining the query.

[ConnorMarble]

Well I was able to get it working by instead using the method described here on another discussion. Although this method requires me to invalidate the entirety of my Todos. Do you know of a way to invalidate a single todo inside a single cache todos?

[waleed-alfaifi]

I'm not sure if that's a possible use case of updating React Query cache. A query with some queryKey is refetched/invalidated as one single entity thus you can't invalidate part of it without invoking the queryFn function. That's just my understanding but I might be wrong.

[TkDodo]

The "updating a single todo" example assumes that you have a detail view where you fetch a single todo. If you don't have that and only work with one query where you have an Array of todos, all you need to do to update an element in the list is, well, find the element in the array and update it, something like:

     // Snapshot the previous value
     const previousTodos = queryClient.getQueryData('todos')
 
     // Optimistically update to the new value
     queryClient.setQueryData('todos', old => old.map(oldTodo=> oldTodo.id === newTodo.id ? newTodo : oldTodo))

this will put the newTodo into the array at the position that matches by id.

if you still have troubles, please post a codesandbox reproduction.

Do you know of a way to invalidate a single todo inside a single cache todos?

React Query has a cache depending on query keys, associated with a fetching function. If you only have a list query that fetches a list, any invalidation on that entry will fetch the list.

[nani1008]

How can I refetch the set of datas of my array cached if I added a new item on it?