Proper way to work with cache data ony (no API, optimistic update)

[igortas]

Hi,

What is the best way to update query cache key and rerender React component?
Let's say that the on bootstrap of the app some key is set with some initial data, instead GET.
Later after some change on the frontend, POST/PUT/PATCH, update the cache locally, with refreshing only that key, I don't need invalidate.

This set of actions, setQueryData(['someKey']) and then refreshQueries(['someKey']) is not working as it should and React component is not rerendering.

The other solution setQueryData(['someKey']) and then invalidateQueries(['someKey']) works, but I need to call useQuery in some nested component down the tree so rerender can work, which I don't like.

version: 4.26.1

BR,

[louis-young]

Hi 👋

I don't really understand the question but updating the query programmatically should automatically update any observers. Please could you provide a reproduction?

[igortas]

@louis-young Doesn't work query.setQueryData to force to update query key in the cache, component not rerendering I need to invalidate query and than in the component to have useQuery for that key. It's too much code for a simple rerender that needs to be forced from the setQueryData. I already have all the data in place, I don't need to call useQuery so component can rerender.

Also, after browser refresh, even I set the cache and persist in session storage with rq persister, returns old data for a while with rq :( I start to love this lib, but has so many flaws, to build something in more manual way and controling the cache,,,

[louis-young]

Please could you provide a reproduction?

[igortas]

@louis-young
What I'm trying to explain is this scenario: When I hit some action post/put/patch I need to invalidate the query on onSuccess, and in the same component I need to have useQuery to refetch newest data and user can see latest data (this is not mandatory because I have all the data in place)

Solution 1) This is working

--- somewhere at the beginning of the component
const data = useQuery(['someKey', { someConfig }]

-- // put/patch/post action
	onSuccess: (_, variables) => {
				queryClient.invalidateQueries({
					queryKey: ['someKey', { extraConfig }],
				});

Solution 2) This is not working (without useQuery at the top of the component and without invalidateQueries):

-- // put/patch/post action
	onSuccess: (_, variables) => {
				queryClient.setQueryData({
					queryKey: ['someKey', { extraConfig }],
				});

Solution 3) If a mix both useQuery and setQueryData, setQueryData even I set locally the cache, on refresh when component renders and runs useQuery, I set initialData or placeholderData, with the data set by setQueryData previous, and while the fetching is happening the initialData is actually old data.
Example:
If I update something from aaa to bbb, then refresh the tab, is shown aaa for second or two, and updated with the new data when finally the fetch with useQuery is done and updated to bbb. This is weird because I have persister (tried with session or local storage the bug is present still).

I expect to set data with setQueryData and the component to rerender without extra invalidate query function, as I have all the data in place, and if I hit refresh and I have persister provider, when I fetch data for backend for any reason and set initialData, the data to be the one I lastly set, and not some old cache data.

[TkDodo]

you need to show a codesandbox reproduction please. As described in the docs, when you call queryClient.setQueryData, your component that uses a query with that key will re-render. If that's not the case, there is something likely not correctly set up in your code. But it's impossible to help with just code snippets.

[igortas]

It's hard to reproduce code, but not sure what can go wrong with setQueryData, because it's executes on onSuccess, and the div where the data needs to change, it is not changing, only if I refetch once again the data from the backend.