Basic example question

[mistre83]

Hi to all,
i found react-query today and i'm trying to learn it :) I downloaded the basic example and i'm trying to understand how this work. What i understand is:

1. I visit the first page and posts are loaded (and displayed)
2. I visit a post and the post is loaded (and displayed)
3. When i back to posts those are already loaded so what i see is a cache version of them (but, the request to /posts are sent anyway)

So, in this example when i visit a page already loaded i see the cached version and when the "background" load is finished if some post is changed, the UI will be automatically refreshed ?

example:

1. I visit post and i see POST1 / POST2 / POST3 (loaded for the first time)
2. I visit POST1 and a post is added when i'm in this page (POST4)
3. I back to post i immediatly see POST1 / POST2 / POST3 and when the background fetch is done the UI is refresh with POST1 / POST2 / POST3 / POST4

I well understand ?

[TkDodo]

So, in this example when i visit a page already loaded i see the cached version and when the "background" load is finished if some post is changed, the UI will be automatically refreshed ?

yes, thats right. the useQuery hook subscribes you to the queryKey, so if the data changes, the ui re-renders.

example:

this is also correct I believe. You could even improve that by doing an optimistic update when you create POST4, so that it will be immediately added to the queryCache, so that you can see it instantly when you go back to the posts page. But this is a more advanced example :)