Preventing flash when using setQueryData before navigation

[kimsagro1]

Preventing flash when using setQueryData before navigation

TanStack Query version: 5.101.0

Background

I have an article editing page that fetches an article using useQuery. When saving, I fire a mutation that on success:

1. Calls setQueryData to update the cache with the new article data
2. Navigates to another page that uses the same query to display the article

The intent is to pre-populate the cache so the destination page renders immediately without a network request.

Problem

There's a brief flash on the edit page between when setQueryData updates the cache and when the navigation actually occurs. Because the edit page is also subscribed to the same query, the UI re-renders with the new data before unmounting — causing a visible title/content flicker.

What I've tried

Using a useRef to snaphot the initial data

const initialDataRef = useRef<Article | null>(null);
const { isPending, isError, data} = useQuery(...);

if (isPending) return ...
if (isError) return ...

// snapshot data on initial render to prevent a flash of updated content
// before navigation when setQueryData is called in the update mutation
if (initialDataRef.current === null) {
  initialDataRef.current = data
}

Question

Is there a way to combine the behaviour of both approaches — i.e. update the cache data (like setQueryData) without notifying active subscribers on the current page, so the destination page gets the data immediately but the edit page doesn't flash?

Something conceptually like:

queryClient.setQueryData(queryKey, newData, { notify:  'false' })

Or alternatively, is there a pattern for setting query data after navigation has completed rather than before, while still keeping the transition seamless?

Any guidance appreciated!