Data is not rendered after second attempt

[reinisg]

Hallo,
I tried to find answer in discussions, but no success.
So the main story.

Packages:
"axios": "^0.24.0",
"react-router-dom": "^5.3.0",
"react-query": "^3.26.0",

My request:

const fetchUseSimpleGet = () =>
  axios
    .get('/api/getStuff')
    .then((res) => {
      return res.data;
    })
    .catch((err) => {
     //some error stuff
    });

export const useSimpleGet = () => useQuery(['getSomeStuff'], async () => await fetchUseSimpleGet(), {});

Component:

const StuffComponent = () => {
const stuffData = useSimpleGet();
return (
  stuffData.isLoading ? (
    <span>Loading...</span>
  ) : stuffData.isError ? (
    <span>Error!</span>
  ) : (
    <>
     {stuffData.data.map((item)=> {
         <div key={item.id}>
            {item.title}
         </div>
      )}
   </>
  )
)
};

export default StuffComponent;

Main problem:

1. I open in browser my page with route - '/stuff'
2. data has loaded, all working great (executes function useSimpleGet )
3. then I add new item (store in database), item has added after successfully posted it
4. I navigate to some other page with route - 'story'
5. then switch back to page with route - '/stuff' and my new item has disappear (but in request I see that item is in the list)
6. if I reload browser, then the Item is loaded into list

I know there is some issue with cache or refetch, I also tried (without success)

export const useSimpleGet = (obj) => useQuery(['getSomeStuff', obj], async () => await fetchUseSimpleGet(obj), {
    staleTime: "Infinity",
    cacheTime: "Infinity",
});

Is there any good and easy solution for this issue?

Regards,
Reinis

[buglessir]

What is that obj.setData(res.data); ? why do you use that?

[reinisg]

My fault, I updated the code, also append component code for better view

[buglessir]

@reinisg Please create a demo something like CodeSandbox, your code isn't enough for debugging...

[reinisg]

@karol-janik answer helped me

[karol-janik]

How did you add item to the database? By request or by hand? Have you tried invalidate cache? https://react-query.tanstack.com/guides/query-invalidation, why did u set these times to infinity? PTAL at https://react-query.tanstack.com/guides/caching

[reinisg]

I m adding items by request.
queryClient.invalidateQueries with name of query causes infinity GET request. (if I call it in component)
I tried to set to infinity, because it was mentioned in some answer in other articles.

*Fixed, managed only like this:
in index.js where is defined QueryClient
const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, staleTime: Infinity, // <<< added this line }, }, });

And for component
for wrapped my requests (post and patch) into mutation

useMutation(() => { // my requests queryClient.invalidateQueries("getSomeStuff"); // added this line }