Avoid refetch on initial load

We have a main grid that is driven by a selected node in a navigation tree. Because

selectedNode

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

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)
})

const selectedNodeId = selectedNode?.id

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

I was looking into

initialData

initialData

placeholderData

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

TanStack•3y 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

selectedNode

selectedNode

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)
})

const selectedNodeId = selectedNode?.id

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

I was looking into

initialData

initialData

placeholderData

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

Avoid refetch on initial load

Similar Threads

Avoid refetch on initial load

Similar Threads

Similar Threads

Similar Threads