Custom hooks with QueryOptions & TypeScript

[fnn]

Hey everyone,

I would like to create custom hooks with the ability to pass the query options.

What I do have so far:

const usePost = (id: number, options?: UseQueryOptions<Post>) =>
  useQuery(["post", id], getPost, options)

This is kind of working but the typing for the select function is wrong.

const { data } = usePost(1234, { select: (post) => post.author });

Will lead to this error:

Type '(post: Post) => string' is not assignable to type '(data: Post) => Post'.
  Type 'string' is not assignable to type 'Post'.

I don't know how to set up the options types to get the same result as useQuery.
It would be awesome to have pretty much the useQuery interfaces just with predefined [entity, id] query key and getEntity fetch function.

[dusty]

Try passing the result set type to useQuery

const usePost = (id: number, options?: UseQueryOptions<Post>) => {
  useQuery<Post>(["post", id], getPost, options)
}

https://github.com/tannerlinsley/react-query/blob/979527b2a922ece2c548f1a82de74052138368cb/src/react/useQuery.ts#L29

[fnn]

Thank you for your answer, but that does not work. The error is the same.

[fnn]

Okay, I'm really bad at TypeScript but this is what I did and I think it is working:

const usePost = <T = Post>(id: number, options?: UseQueryOptions<T, any, Post>) =>
  useQuery(["post", id], getPost, options)

And now if I use the custom hook with a select function the data type is correct.

const { data } = usePost(1234, { select: (post) => post.author }); // 'data' is a string

I just don't know why this works. I thought with this solution I always have to pass the type to the custom hook like this:
usePost<string>(1234, { select: (post) => post.author });, but this is not the case..

[zakariaelas]

Hello @TkDodo , sorry to piggyback on this!

I'm using react-query ^3.29.0, and the codesandbox demo you provided breaks the first version (which i'm interested in) of the usePosts hook under3.29.0.

Using the code in the demo, it seems that the query key type is being inferred to (string | number)[] conflicting with the default QueryKey type coming from the UseQueryOptions<Post, unknown, Post> (because of the default 4th generic type, this is the same as UseQueryOptions<Post, unknown, Post, Query>).

How do you suggest solving this? An easy and quick fix is to do UseQueryOptions<Post, unknown, Post, any[]>. Would you advise against this? I could do UseQueryOptions<Post, unknown, Post, (string | number)[]> but I think is adds some friction and I'd rather infer types as much as possible.

Thanks!

[TkDodo]

This has been reported multiple times, please see: #2795

[piotrpalek]

@TkDodo sorry to dig this up, but I'm trying to workaround the "wrap react-query and pass all custom options to it with typescript working" problem. Did anything change? I've looked at the comment you've linked, but the solution there also doesn't work when you try to use select right?

I mean when I type the UseQueryOptions with Thing, and will try to pass a select option through my wrapper it'll complain that it doesn't return Thing.

[TkDodo]

you need to use all 4 generics. I'm not really sure why you'd want to create a low-level abstraction that allows all options, but if you really need to, this twitter thread describes a possible approach:

https://twitter.com/TkDodo/status/1491451513264574501

[piotrpalek]

@TkDodo thanks so much! Clearly I need to figure out ReactQuery more if that's not a pattern that should really be followed (feels natural to me though), anyway, ty :)

[mathura333]

After allot of hit and trails finally I wrote this and it worked perfectly

type ApiBody = mapApiTypes['/api/v1/shortlist_cta/:id']['res']['body'];

const useShortlistCta = <QueryRes = ApiBody>(
  { id, by = 'merchant_id' }: ApiParams,
  select?: (data: ApiBody) => QueryRes,
  options: UseQueryOptions<ApiBody, unknown, QueryRes> = {}
) => {
  return useQuery<ApiBody, unknown, QueryRes>(
    [RQ_SHORTLIST_CTA, id, by],
    () => fetchShortlistCta(id, by),
    {
      select,
      enabled: !!id,
      ...options,
    }
  );
};

const { data } = useShortlistCta(
  {
    id: '123',
  },
  (resData) => resData[0].enabled
) 

// here data type is boolean | undefined as output which is as expected

[QuyNguyenDev97]

Hello this is my solution for useQuery and useMutation

[TkDodo]

have you tried using the select option with your abstraction? Because it won't work ... it would be a lot better to just use the queryOptions function from v5:

const getReeivingDepartmentQueryOptions = queryOptions({
  querykey: [...],
  queyFn: ...
})

then, on call sides, just do:

useQuery({
  ...getReeivingDepartmentQueryOptions,
  ...moreOptionsGoHere
})

[QuyNguyenDev97]

amazing,it's very helpful,thanks bro

[shongs27]

@TkDodo So, then how to make moreOptionsGoHere type?

const getReeivingDepartmentQueryOptions = queryOptions({
  querykey: [...],
  queyFn: ...
})

export const useGetNormalActivityList = (
  date?: string,
  options?: Omit<UseQueryOptions<any>, 'queryKey' | 'queryFn'>, // <- here?
) => {
  return useQuery({
    ...getReeivingDepartmentQueryOptions,
    ...options,
  });

[TkDodo]

So, then how to make moreOptionsGoHere type?

You just inline them and don't further abstract them to a custom hook - that's the whole point:

const getReeivingDepartmentQueryOptions = queryOptions({
  querykey: [...],
  queyFn: ...
})

// usage 1 in <MyComponent />

const { data } = useQuery({
 ...getReeivingDepartmentQueryOptions,
 enabled: !!someCondition,
}

// usage 2 in <MyOtherComponent />

const { data } = useSuspenseQuery({
 ...getReeivingDepartmentQueryOptions,
 refetchInterval: 10 * 1000,
}