[Typescript] How do I specify the return type of a custom hook?

[johnjiang]

Hi Tanner, thanks for creating react-query, it's been a joy to use so far.

This is more of a typescript question more than anything, I'm struggling a little bit with typescript return types of custom hooks. Using this as an example: https://react-query.tanstack.com/docs/examples/custom-hooks

export default function usePost(postId: number) {
  return useQuery(["post", postId], getPostById);
}

What's the best way to specify the return type of usePost in typescript?

Currently I could do something like:

export default function usePost(postId: number): {data: Post | undefined; error: any, isLoading: boolean} {
  return useQuery(["post", postId], getPostById);
}

But this seems very manual and repetitive, is there a better way?

[alinjie]

QueryResult can be used for this, which works pretty nice. See the example of the custom useTodos and useJoke hooks in this sandbox

[tharakabimal]

Module 'react-query' has no exported member QueryResult

[alinjie]

@tharakabimal useQuery also supports generics, so you can specify the data and error type like this.

function useJoke() {
  return useQuery<Joke, Error>("joke", async () => {
    const response = await fetch("https://icanhazdadjoke.com/", {
      headers: {
        Accept: "application/json"
      }
    });

    if (!response.ok) {
      throw new Error("Failed to fetch!");
    }

    return await response.json();
  });
}

[alinjie]

Also, it seems like QueryResult was replaced by UseQueryResult for v3, so you can still explicitly specify a return type like this

import { useQuery, UseQueryResult } from "react-query";
// ....

function useTodos(): UseQueryResult<Todo[], Error> {
  return useQuery("todos", async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos");

    if (!response.ok) {
      throw new Error("Failed to fetch!");
    }

    return await response.json();
  });
}

[tharakabimal]

Thanks so much @alinjie

[boschni]

You can indeed use QueryResult or don't specify the return type, then TypeScript will infer it from the useQuery function.

[cliffordfajardo]

This thread was helpful!
This thread helped me find a solution to creating a custom hook that is using useQuery that also accepts an optional useQueryOptions object.

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