I am trying to work with useQuery in Typescript

Question

When working with the useQuery hook in typescript/react I get an error saying Argument of type '(param: Param) => Promise<any>' is not assignable to parameter of type 'QueryFunction<IResponsePlanets, QueryKey>'.

but keep in mind that onSuccess function is working here. even though I get an error

This is the interface for params

type Param = {
    pageParam?: undefined;
    queryKey: [string, { page: number }];
}

This is the async function

const fetchFunction = async (param: Param) => {
    const [key, { page }] = param.queryKey;
    const response = await fetch(`https://swapi.dev/api/planet/?page=${page}`);
    return response.json();
};

This is the useQuery hook

 const { status, error, data } = useQuery<IResponsePlanets, Error>(["planets", { page: 1 }], fetchFunction, {
     staleTime: 5000,
     onSuccess: () => {
         console.log('working👍')
     }
 };

please provide a reproduction (e.g. codesandbox), it's hard to say otherwise — TkDodo
– TkDodo, Commented Sep 25, 2021 at 10:17

Kostiantyn Ko · Accepted Answer · 2021-12-13 10:34:49Z

2

The problem is in signature of your fetchFunction

const fetchFunction = async (param: Param) => {
                                    ^^^^^
    const [key, { page }] = param.queryKey;
    const response = await fetch(`https://swapi.dev/api/planet/?page=${page}`);
    return response.json();
};

The argument should be of type QueryFunctionContext<Param>

answered Dec 13, 2021 at 10:34

Kostiantyn Ko

2,8701 gold badge24 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I am trying to work with useQuery in Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related