Loading pattern I want for my useQuery hook

The goal is: as long as the query is observed by any subscribers, I don't want it to be refetched ever (no refetch onMount, onFocus, onReconnect, nothing). As soon as the query isn't observed anymore, I want to either become stale (or removed from the queryCache) so that the next time it gets observed, it refetches again.

Would this be enough to do it?

function Component(props) {
  const {} = useQuery({
    queryKey: ['myquery', props.key],
    gcTime: 0, // if the query becomes unobserved, clean it up immediately
    staleTime: Infinity, // but as long as it is observed, do not fetch again
  });
}

function Component(props) {
  const {} = useQuery({
    queryKey: ['myquery', props.key],
    gcTime: 0, // if the query becomes unobserved, clean it up immediately
    staleTime: Infinity, // but as long as it is observed, do not fetch again
  });
}

function Component(props) {
  const {} = useQuery({
    queryKey: ['myquery', props.key],
    gcTime: 0, // if the query becomes unobserved, clean it up immediately
    staleTime: Infinity, // but as long as it is observed, do not fetch again
  });
}

function Component(props) {
  const {} = useQuery({
    queryKey: ['myquery', props.key],
    gcTime: 0, // if the query becomes unobserved, clean it up immediately
    staleTime: Infinity, // but as long as it is observed, do not fetch again
  });
}

Loading pattern I want for my useQuery hook

Similar Threads

Similar Threads

Similar Threads