showing cached data while component suspended.

[dante01yoon]

Greetings,

Is it possible to use different key of data while fetching data of new key ?

What I mean is when drawing some component has pagination, I think it would be better show previous page of data while fetching new page, rather than showing whole zero-data fallback ui.

Is it possible to see show old data while fetching different part of keys ?

const Table = ({page}) => {
  const data = useQuery({
    queryKey: ["PAGINATION", `page_${page}`],
    queryFn: () => getData,
  })

 return (
    ... 
 )
}

...
const Parent = () => {
 const [page, setPage] = useState(0);
  return (
   <>
     <button onClick={() => setPage(prev => +prev)}>next page</button>
     <Suspense fallback={<ZeroDataUI/>}>  // <- Is it possible show page 0's data while fetching page 1's data? 
        <Table page={page}/>
    </Suspense> 
  </>
  )

}

[dante01yoon]

Should I use another Table data as fallback UI while fetching 🤔

<Suspense fallback={<Table page={page -1} enable={false}/>}>  // <- Is it possible show page 0's data while fetching page 1's data? 
        <Table page={page}/>
    </Suspense> 

[TkDodo]

If you are using suspense, you would need to wrap the page state update in startTransition. You can see this in action in our suspense example:

• https://tanstack.com/query/v4/docs/examples/react/suspense

If you're not using suspense, you can use keepPreviousData: true to achieve that:

• https://tanstack.com/query/v4/docs/guides/paginated-queries

[dante01yoon]

Appreciate your answer. :)

I'll check this out

[dante01yoon]

@TkDodo I wonder using startTransition could be omitted and just using keepPreviousData?

I turn on suspense: true, also a keepPreviousData: true, and seems works intended under React.Suspense.

https://codesandbox.io/s/compassionate-rumple-fnozyj?file=/pages/index.js

[TkDodo]

nah, if you want to use suspense, please use transitions. There is already one open issue about keepPreviousData and suspense / transitions. It wasn't really made for that.

[dante01yoon]

I see :) Thanks for response