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 };
}