TanStackT
TanStack•2y ago•
8 replies
sad-indigo

Avoid refetch on initial load

We have a main grid that is driven by a selected node in a navigation tree. Because selectedNode is persisted on the server and because the resources are slow/expensive, we load both asynchronously. However doing this means the grid is aborted/refetched (or refetched if the grid finishes first) when selectedNode gets set so we're wondering if there's a good way to avoid triggering a refetch for that first load?

const selectedNodeId = selectedNode?.id

const { data } = useQuery({
  queryKey: ['MainGrid', selectedNodeId]
  queryFn: ({ signal }) => mainGrid.query({ selectedNodeId }, signal)
})


I was looking into initialData or placeholderData but I don't think either help me here. Tried finding the answer in Dominik's blog too https://tkdodo.eu/blog/effective-react-query-keys
Effective React Query Keys
Learn how to structure React Query Keys effectively as your App grows
Effective React Query Keys
Was this page helpful?