Multiple invocations of useQuery with same key and query function, but different options

[jy14898]

(I'm currently using react-query v3, but if the behaviour is different in later versions, it would be good to hear w.r.t upgrading motivation)

The docs state

As long as the query key is serializable ..., and unique to the query's data, you can use it!

but it's not clear to me what data means here? Is it the whole useQuery configuration?

For example, does it break useQuery rules to use the same key for differing refetchInterval settings? If it's allowed, what are the semantics for the actual refetch interval for the query?

const result1 = useQuery({
  queryKey: ['todos', todoId],
  queryFn: () => fetchTodoById(todoId),
  refetchInterval: 1_000,
});
const result2 = useQuery({
  queryKey: ['todos', todoId],
  queryFn: () => fetchTodoById(todoId),
  refetchInterval: 2_000,
});

One case I'm hitting is we want to keep react components mounted to preserve state in our app (such as scroll state) without having to save/restore, as the user moves between tabs on a page. But some queries are expensive to poll, so we want to disable refetching when a tab isn't active. This causes a problem though, if one useQuery invocation says to turn off refetching, but another says to refetch, we want to make sure it continues to refetch. For example, the same query is used on an active tab and an inactive tab.

My understanding of tanstack query is there's per observer state (individual useQuery), and then a collective query state for the key. From my own testing, it seems like in v3 the query state will pick up an aribtrary hooks invocation of the options (or at least some options, like refetch interval). Is this true in later versions too? In an ideal case, tanstack query has builtin logic which takes a min/max of the various options to do a reasonable thing.

One solution is to include this information in the key, at the cost of less sharing. I've definitely not seen a single example encode information such as refetch interval in the keys though.

[TkDodo]

refetchInterval is a per-observer setting. If you have two observers mounted with two different intervals, they will both be triggered, but intervals re-set when data comes in, so in your example, you would get a fetch every second.