React Tanstack Query cache update

Question

React Query not updating my list on first render

My list is not updating when i come back after updating my list , but my api is returning updated data

export default function App() {
const [id] = useQueryState("category-id", parseAsInteger);

const queryKey = useMemo(() => ["list", id], [id]);

const { data: list,isLoading } = useQuery({
queryKey,
queryFn: () => getList({ categoryId: id || null }),
enabled: !!id,
refetchOnMount:'always',
staleTime:0
});

const isList1Empty = useMemo(() => {
    if (id !== 1 && !list) return false;

        return list.length === 0;
}, [id,list]);

const isList2Empty = useMemo(() => {
    if (id !== 2 && !list) return false;

                return list.length === 0;
}, [id,list]);

useEffect(() => {
if (!list) return;

    if (
        (id === 1 && isList1Empty) ||
        (id=== 2 &&  isList2Empty)
    ) {
    // navigate to update list page
    }
 }, [id,list]);


 if (isLoading) {
    return (
        <h1>loading</h1>
    );
 }



 return <div>{id === 1 ? <List1 list={list} /> : <List2 list={list}    />}</div>;
 }

Steps :

Page loaded
get list api called
checks if list is empty
if empty redirect to update form page
updated my list
comes back to this page
getList returns updated list but its not updated on my ui listing on first mount

have you tried refetchOnMount: 'always' ?

Hashan Hemachandra
– Hashan Hemachandra

2025-05-21 08:49:13 +00:00
Commented May 21 at 8:49 — Hashan Hemachandra
– Hashan Hemachandra, Commented May 21 at 8:49
already tried , did not work

razer
– razer

2025-05-21 09:32:35 +00:00
Commented May 21 at 9:32 — razer
– razer, Commented May 21 at 9:32

Hashan Hemachandra · Accepted Answer · 2025-05-21 09:03:01Z

0

I think the issue here is by the time your background refetch completes, your redirect logic has already executed.

Try adding refetchOnMount: 'always',

Also try using isFetching and isLoading properties in useQuery

const { data: list, isFetching, isLoading } = useQuery({
  queryKey,
  queryFn: () => getList({ categoryId: id || null }),
  enabled: !!id,
  staleTime: 0,
  refetchOnMount: 'always',
});

useEffect(() => {
  if(!isFetching && !isLoading && !list?.length){
    // navigate to list update form
  }
}, [list, isFetching, isLoading]);

answered May 21 at 9:03

Hashan Hemachandra

4612 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

razer May 21 at 9:33

did not solve the issue

Hashan Hemachandra May 21 at 11:47

Could you share the code that updates the list and how you navigate back to this page?

razer May 21 at 12:04

if you console.log list outside of useEffect data is updated , but inside useEffect data is not updated, so it navigates to // navigate to update list page on mount

Collectives™ on Stack Overflow

React Tanstack Query cache update

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related