Allow manual configuration of the react-query key

[jorisre]

What do you want and why?

What?
I want to be able to change manually the react-query cache key

Why?
I want to display multiples results based on different react-query keys, for example:

• Home list
• Search list
• Etc ...

It allows us to have multiples results in cache and improve the UX or trigger a new request when the key change.

Possible implementation(s)

I'm pretty new to Blitz, here is some idea.

One possible implementation:

import type { AnyQueryKey } from "react-query"

const [...] = useQuery(getProject, params, { key:  `my-key` }) // Key is of type AnyQueryKey and it's optional

getQueryKey util could have a third optional arg:

export function getQueryKey<TInput, TResult, T extends QueryFn>(
  resolver: T | Resolver<TInput, TResult> | EnhancedResolverRpcClient<TInput, TResult>,
  params?: TInput,
  key?: string // <= 🆕
) {
  if (typeof resolver === "undefined") {
    throw new Error("getQueryKey is missing the first argument - it must be a resolver function")
  }

  return getQueryKeyFromUrlAndParams(sanitize(resolver)._meta.apiUrl, params, key) // Pass down the key
}

react-query v2 impacted hooks:

• useQuery
• usePaginatedQuery
• useInfiniteQuery

Additional context

Here is the original discussion: blitz-js/blitz#2128

Maybe related to Upgrade react-query to v3 - blitz-js/legacy-framework#518 because some hooks are deprecated in v3 (usePaginatedQuery)

[flybayer]

I just gave an update at blitz-js/blitz#2128 (comment)

Does that solve your use case?

[jorisre]

Thanks @flybayer for the help, it works except for one case, I'll open an issue (ref: blitz-js/blitz#2128 (reply in thread))