How to create a custom useQuery hook with optional configuration options (useQueryOption)❓

[cliffordfajardo]

Hi all,
I was trying to figure out a way to create a custom useQuery hook that could accept an optional object with useQueryOption values. This is useful for scenarious where you might use a hook in different places:

// Page1
const myData = useCustomHook('some_val', {
  onSuccess: () => navigate('/settings'),
  //....other valid options.....
})

// Page2
const myData = useCustomHook('some_val', {
  onSuccess: () => navigate('/other_route'),
    //....other valid options, but different.....
})

What I've Tried

Initially my custom hook using useQuery wasn't giving me the type inference I needed:

type Item = { name: string };
const fetcher = async (): Promise<Item[]> => [{ name: "adam" }, { name: "ben" }];

// has ability to pass optional values to useQuery's `useQueryOptions` object but  types are lost ❌
export const useGetData = (randomParam: string, configOptions: UseQueryOptions) => {
  const queryResponse = useQuery({
    queryKey: [randomParam],
    queryFn: fetcher,
    ...configOptions // ← this object spreading causing problems
  });
  return queryResponse; // ❌ unfortunately this comes back UseQueryResult<unknown, unknown> , it should be UseQueryResult<Item[], unknown>
};

I was able to get back the type information I needed by casting useQuery's response like this:

type Item = { name: string };
const fetcher = async (): Promise<Item[]> => [{ name: "adam" }, { name: "ben" }];

export const useGetData = (randomParam: string, configOptions: UseQueryOptions) => {
  const queryResponse = useQuery({
    queryKey: [randomParam],
    queryFn: fetcher,
    ...configOptions
  }) as UseQueryResult<Item[]>;  // ✅
  return queryResponse;
};

Is there a way to get this to work without casting? I've tried this (no cast) but the issue seems to be the ...configOptions being spread, which confuses typescript.

type Item = { name: string };
const fetcher = async (): Promise<Item[]> => [{ name: "adam" }, { name: "ben" }];

// --------------------------------------------------------------------------------------------↓
export const useGetData = (randomParam: string, configOptions: UseQueryOptions): UseQueryResult<Item[]>; => {
  const queryResponse = useQuery({
    queryKey: [randomParam],
    queryFn: fetcher,
    ...configOptions
  }) 
  return queryResponse;  // ❌ unfortunately this comes back UseQueryResult<unknown, unknown> , it should be UseQueryResult<Item[], unknown>
};

Codesandbox: https://codesandbox.io/s/nervous-engelbart-mzygc?file=/src/App.tsx

References

• Thanks @TkDodo for this blog post: https://tkdodo.eu/blog/react-query-and-type-script
• [Typescript] How do I specify the return type of a custom hook? #929

[mfpopa]

Type inference does not seem to work for UseQueryOptions, so you just need to specify a generic => UseQueryOptions<Item[]>.

export const useGetData = (randomParam: string, configOptions: UseQueryOptions<Item[]>) => {
  return useQuery([randomParam], fetcher, {
    ...configOptions, // ← this object spreading causing problems
  });
};

Type inference is great when it works, but sometimes it does not and it can get very complicated which is why I prefer specifying types everywhere. I am not talking about React Query, but TypeScript code in general.

[TkDodo]

This is not a type inference issue. UseQueryOptions has 4 generics. If you just write UseQueryOptions, all default values for the generics are chosen:

query/src/reactjs/types.ts

Lines 26 to 31 in 250c654

	export interface UseQueryOptions<
	TQueryFnData = unknown,
	TError = unknown,
	TData = TQueryFnData,
	TQueryKey extends QueryKey = QueryKey
	> extends UseBaseQueryOptions<

if that doesn't match your actual types, you get mismatches.

Passing one generic as @mfpopa suggests will solve most of the issues, but select won't work and the queryKey will not have the correct type in the queryFunctionContext.

My usual advice would be to not create abstractions that allow passing all query options, but to only provide those that you want consumers to override. Otherwise, the abstraction is likely too wide, and you'd need to juggle a lot of generics like react-query has to do internally :)
Some props you likely don't want consumers of your custom hook to provide, like cacheTime or staleTime, as it doesn't make much sense to have different values for the same cache entry.

[TkDodo]

Specifically, that we're able to make use of type inference for the select field without having to pass explicit types to useQuery.

You don't need to do that. Here's how I write a custom hook that takes select:

type Items = Array<string> // whatever items is
const useItemsQuery = <TResult = Items>(select?: ((data: Items) => TResult)) =>
  useQuery({ queryKey, queryFn, select })

useItemsQuery()
useItemsQuery(items => items.length)

[thatCarlyleGuy]

That's what I'm trying to avoid. I'm maintaining a library with 30+ custom hooks.

1. I want to standardise the use of the select option. Using your suggested method, I'd have to add the same generic type to each hook.
2. Given that my library is shared across the org, I don't know what the consumer of that hook will need down the line. I'd rather set sane defaults and expose the full list of options for each hook instead of having each dev tinker with the implementation each time they need an additional option for each hook. The useQueryFactory does that for free; unifies the interface exposed across all custom hooks and has full type inference.

[LeoCaprile]

@TkDodo If we're encouraged to create our own custom hooks, I think it's important that we're able to do that easily in Typescript. Specifically, that we're able to make use of type inference for the select field without having to pass explicit types to useQuery.

A possible way of doing this might look like this (using the v3 api in this case):

const useQueryFactory =
  <TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
    queryKey: TQueryKey,
    queryFn: QueryFunction<TQueryFnData, TQueryKey>,
  ) => <SelectType = TData>(
    options?: Omit<UseQueryOptions<TQueryFnData, TError, SelectType, TQueryKey>, 'queryKey' | 'queryFn'>
  ) => {
  return useQuery(
    queryKey,
    queryFn,
    options
  );
};

const useItemsQuery = useQueryFactory(
  ['items'],
  fetchItems,
);

const TypesInferred = () => {
  // type is inferred as UseQueryResult<Items[], unknown>
  const messageTemplates = useItemsQuery();

  // type is inferred as UseQueryResult<SomeItems[], unknown>
  const userTemplates = useItemsQuery({
    select: selectSomeItems
  });

  // ...
};

Would be really cool if something like this was available in the library given how powerful the select option is and how generalised we can make our custom hooks out of the gate.

Man you're a life saver, I needed the options to keep the typing, I were debuggin for hours, and saw your code and a bulb turn on. Thanks!

[ArturKustyaev]

@TkDodo If we're encouraged to create our own custom hooks, I think it's important that we're able to do that easily in Typescript. Specifically, that we're able to make use of type inference for the select field without having to pass explicit types to useQuery.

A possible way of doing this might look like this (using the v3 api in this case):

const useQueryFactory =
  <TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
    queryKey: TQueryKey,
    queryFn: QueryFunction<TQueryFnData, TQueryKey>,
  ) => <SelectType = TData>(
    options?: Omit<UseQueryOptions<TQueryFnData, TError, SelectType, TQueryKey>, 'queryKey' | 'queryFn'>
  ) => {
  return useQuery(
    queryKey,
    queryFn,
    options
  );
};

const useItemsQuery = useQueryFactory(
  ['items'],
  fetchItems,
);

const TypesInferred = () => {
  // type is inferred as UseQueryResult<Items[], unknown>
  const messageTemplates = useItemsQuery();

  // type is inferred as UseQueryResult<SomeItems[], unknown>
  const userTemplates = useItemsQuery({
    select: selectSomeItems
  });

  // ...
};

Would be really cool if something like this was available in the library given how powerful the select option is and how generalised we can make our custom hooks out of the gate.

Good afternoon, how can I pass query parameters to the queryFn function?

[WesleyYue]

Any idea on how to make a useInfiniteQueryFactory? Have been struggling on this for a while

[nextglabs]

Had a similar situation and I solved it this way by passing the same type used in UseQueryOptions<T> to the useQuery<T>(...)

export const useGetData = (randomParam: string, configOptions?: UseQueryOptions<Item[]>) => {
  return useQuery<Item[]>([randomParam], fetcher, options);
};

[TkDodo]

This is a limited approach that will only get you so far - the select option won't work with that, for example. But great that it works for your case 👍

[devgogo]

resolved

export const useHealth = (options?: QueryOptions<HealthResult, ErrorResponse>) => {
  return useQuery(['health'], health, options)
}

and

export const useUnsubscribe = (
  options?: MutationOptions<unknown, ErrorResponse, string>
) => {
  return useMutation(unsubscribe, options)
}

[NarenderSiri]

Please …how to write in react js

[mkarajohn]

In case this is still an issue for anyone that stumbles upon this thread, I resolved this like so:

export function useSpecificButCustomizableQuery(
  params: Record<string, string>,
  queryOptions: Omit<
    UseQueryOptions<
      TypeOfReturnValue,
      unknown,
      TypeOfReturnValue,
      TypeOfTheQueryKey
    >,
    'queryKey' | 'queryFn'
  > = {}
) {

  return useQuery<
    TypeOfReturnValue,
    unknown,
    TypeOfReturnValue,
    TypeOfTheQueryKey
  >({
    ...queryOptions,
    queryKey: ['your', 'key'],
    queryFn: (): Promise<TypeOfReturnValue> => {}
  });
}

[WillWarnerNerdery]

I utilized @TkDodo's approach with Pick to get some type safety.

 const useCustomQuery() (options: Pick<UseQueryOptions, 'enabled'> = { enabled: true }) => {
    useQuery( queryKey, queryFn, options)
}