Update/set nested data

[tomaszczura]

Hi

Assuming I have todos cache with following structure:

{
   "count": 3,
   "data": [....array of my todo items]
}

How can I get a single todo from data using getQueryData, and how to update it using setQueryData without querying/updating the whole todos cache?
I mean, I can do the following: queryClient.getQueryData("todos") and work with returned data, but I wonder if there is a way to get a single item like described here: https://react-query.tanstack.com/guides/query-keys. I tried queryClient.getQueryData(["todos", "data"]), queryClient.getQueryData("todos.data"), but I get undefined.

[TkDodo]

my mental model of the query cache is that it's just a good old javascript object, where the keys are the serialized version of your query-keys and the data is whatever you put in there. with getQueryData, you do an indexed access to that object, and with setQueryData, you set it. So there is nothing magical about it.

useQuery will put data into the cache at the position of the key after the data has been fetched. So if you only have a query that populates the todos entry in the cache, that's all there is. You can inspect what is in the cache easily with the devtools (can highly recommend).

if you have a separate component that does useQuery['todods', todo.id], then you will also have it available. That's what the basic example does with posts: https://react-query.tanstack.com/examples/basic