Return the QueryKey from useQuery

[shughes-uk]

Generally we defining one hook that creates the query, and then reusing it all over our codebase

export const useSomeThing = (someArg,Arg2):QueryResult => {
    return useQuery(["getSomeThing", someArg,Arg2] , ()=> "barf")
}

We have a couple of components that accept a query key so they can monitor specific queries (a refetching indicator for example)

It would be nice if useQuery returned the querykey, this would allow us to easily pass it around to the relevant components. Right now we tend to use a constant for the string part of the query key and pass that in, which is "ok".

[TkDodo]

I'd recommend the queryOptions function to abstract those away, and export it as a re-usable object:

export const someThingQuery = (someArg,Arg2) queryOptions({
  queryKey: ["getSomeThing", someArg,Arg2],
  queryFn: () => "barf"
})

you can then pass this to useQuery as well as to other functions like invalidateQueries or even useQueries.

Returning the values from useQuery doesn't make much sense because you can only then pass it down to components below that query, which doesn't cover cases where you need it in a sibling component. Calling the hook just to get the queryKey is also suboptimal, because it creates another subscriber. What you likely want is to abstract away the options.

[csepulv]

FWIW, I have the same request and found this issue as I was looking for the same thing. To elaborate, when using useQueries, the results has an array where the positions (indices) do match what was given to useQueries, but the book keeping of matching the query with the result has to be done in my code.

While this is manageable, it would be more convenient if the queryKey was returned in in the result. The queryKey already contains the domain identifiers, encoded in my key, which makes result-to-query identification easy, if I had the queryKey in the result.

[jasongerbes]

@TkDodo would you be willing to reconsider this request?

I have a reusable query hook that determines the queryKey based on several optional props used by the load function. A child component needs to know the queryKey to invalidate the query after a mutation, but doesn't have the context required to recreate the queryKey.

My current workaround is to use a custom UseQueryResultWithKey type to include the queryKey so that it can be passed to the child component:

import { type QueryKey, useQuery, type UseQueryResult } from '@tanstack/react-query';

export type UseQueryResultWithKey<TData = unknown, TError = unknown> = UseQueryResult<TData, TError> & {
  queryKey: QueryKey;
};

export function useExampleQuery(identifiers: { id1?: string; id2?: string }): UseQueryResultWithKey<unknown, unknown> {
  const queryKey = ['example', identifiers];

  const query = useQuery({
    queryKey: queryKey,
    queryFn: () => loadFunction(identifiers)
  });

  return { ...query, queryKey };
}

[TkDodo]

I am thinking about this functionality, yes, but since the QueryKey is generically typed, we would need to add more type parameters to the UseQueryResult and mostly, it’s not worth it.

but doesn't have the context required to recreate the queryKey.

instead of passing the queryKey to the child component, you can also pass the identifiers so that it can re-build the key. Or, you would invalidate more broadly: queryClient.invalidateQueries(['example'])

or, you create the key and pass it down?

const queryKey = getKey(many, optional, props)

const query = useQuery({ queryKey, queryFn })

<ChildComponent queryKey={queryKey} />

why does it matter here if the queryKey is returned from useQuery or you extract the one you pass to useQuery to a constant?

[Devon-Dickson]

I'm working through the v4 to v5 migration and have reached the deprecation of remove from useQuery. The recommended replacement is to call queryClient.removeQueries({ queryKey }).

@TkDodo Your last message suggests rebuilding the queryKey which is doable, but would imply exporting the queryKeyFactory from queries.ts which you didn't recommend in this blog post.
https://tkdodo.eu/blog/effective-react-query-keys#colocate

Exceptions are sometimes necessary, but I wanted to call this out in case there was something I was misunderstanding!

edit: While revisiting the blog I noticed your newer post on Query Options, which looks like an even better approach!
https://tkdodo.eu/blog/the-query-options-api