[Typescript] How to pass the type for the error using useQuery?

[cant89]

Hi,

I can't find a way to infer the type for the error of the useQuery response, it always comes as unknown.
Is there a way?
If not, could you add the possibility to pass it to type QueryResult as with the TResult?

Thanks

[alinjie]

Hi!

The error type can be set like this

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

function useTodos(): QueryResult<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();
  });
}

If the function throws the error variable will be of type Error, as specified in QueryResult.

Hope this helps!

[cant89]

Ops sorry, I just had to update to the latest version. Thanks for the quick answer.

[MAb540]

for latest version of react query use UseQueryResult<Todo[], Error>.

[diegoarcega]

The second argument in the useQuery generic is the type of the error.

what I did was:

interface App {} // response in "data"
interface ApiError {} // error object

const { data, error } = useQuery<App, ApiError>(['app', id], () =>
    AppsService.getApiV1Apps(id)
  );

[TkDodo]

for v5, please see:

https://tanstack.com/query/v5/docs/react/typescript#registering-a-global-error