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..

[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 :)

[raky291]

@TkDodo Thanks for sharing the tweet!

Would it be possible to add that information to the documentation? I think it's very valuable.

[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

[Yuqgnort]

Hello this is my solution for useQuery and useMutation

[Yuqgnort]

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

[jknb]

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

Are there no cases where making an abstraction makes sense? All the queries in my app need to do a common thing (call a hook to get an important state variable and use it in the fetch function. Also the fetch function is used everywhere).

Repeating the same thing in every component feels too repetitive instead of creating a wrapper hook that does this. I want to make it generic so it can be used anywhere and any consumer can pass the options they want.

Maybe my approach is wrong and I'm looking at the wrong problem but the way I've implemented it, I'd like to be able to somehow pass any options as params and type the select properly.

[TkDodo]

instead of creating a wrapper hook that does this

sure you can do that, but don’t make a wrapper hook that again takes arbitrary options because then it’s no longer “all the queries do a common thing”. If it’s a common thing, sure, make a hook:

const useMyQueryWithInterval = () => {
  return useSuspenseQuery({
   ...getReeivingDepartmentQueryOptions,
   refetchInterval: 10 * 1000,
  })
}

or make another query options abstraction:

const getReeivingDepartmentQueryOptionsWithInterval = () => {
  return queryOptions({
   ...getReeivingDepartmentQueryOptions,
   refetchInterval: 10 * 1000,
  })
}

but don’t try to do “useReeivingDepartmentQuery(arbitraryOptionsGoHere)” because that’s just what queryOptions or useQuery already do.