Tanstack Query placeholder

static data


function Todos() {
  const result = useQuery({
    queryKey: ['todos'],
    queryFn: () => fetch('/todos'),
    placeholderData: placeholderTodos,
  })
}

previous data


const result = useQuery({
  queryKey: ['todos', id],
  queryFn: () => fetch(`/todos/${id}`),
  placeholderData: (previousData, previousQuery) => previousData,
})

Placeholder Query Data | TanStack Query React Docs

What is placeholder data? Placeholder data allows a query to behave as if it already has data, similar to the initialData option, but the data is not persisted to the cache. This comes in handy for si...

https://tanstack.com/query/latest/docs/framework/react/guides/placeholder-query-data

Tanstack Query placeholder

Recommendations