What is the recommended way to prevent query cache pollution from conditionally disabled queries?

[blindbeat]

I have a pattern throughout the app where a query remains dormant until the required parameters are provided. Only when those parameters are present does the query attempt to make a request.

For example:

    queryKey: [queryKeys.ORGANISATIONS, organisationId, queryKeys.MODELS, modelId],
    queryFn: organisationId && modelId ? () => getModel(organisationId, modelId) : skipToken,
    staleTime: 1000 * 60 * 15, // 15 minutes

However, the cache ends up with entries like:

• An entry with organisationId === null
• An entry with modelId === null
• An entry with both organisationId and modelId === null

These entries appear if the hook is called at any point with those values.

As a partial mitigation, I’ve been doing the following:

    queryKey:
      organisationId && modelId
        ? [queryKeys.ORGANISATIONS, organisationId, queryKeys.MODELS, modelId]
        : PLACEHOLDER_QUERY_KEY,
    queryFn: organisationId && modelId ? () => getModel(organisationId, modelId) : skipToken,
    staleTime: 1000 * 60 * 15, // 15 minutes

This works, but it feels a bit cumbersome and still creates a query key.

I'm wondering: is there a clean way to prevent pollution of the query cache and devtools with these queries that, by design, will never be fired? The main motivation for this is to make query management easier in devtools, as the actual runtime effect is negligible.

[TkDodo]

to prevent pollution of the query cache

that behaviour is by design and not something you should worry about / try to limit. The only alternative is not calling useQuery, which means rendering a component conditionally:

if (organisationId && modelId) {
  return <MyComponentThatCallsUseQueryUnconditionally />
}

maybe we could add a filter to the devtools? We already have them labelled as disabled...

[blindbeat]

that behaviour is by design and not something you should worry about / try to limit.

thanks for clarification. then I would just ignore them for good

[blindbeat]

maybe we could add a filter to the devtools? We already have them labelled as disabled...

I believe it shows queries as disabled also when query is disabled by enabled flag {enabled: false}. This queries make sense in devtools (at least for me).

I think the best solution for me is just to not try keep cache "clean"