Tuesday, May 14, 2024
 Popular · Latest · Hot · Upcoming
117
rated 0 times [  122] [ 5]  / answers: 1 / hits: 5782  / 2 Years ago, sat, august 13, 2022, 12:00:00

I'm using react query with typescript. What is the type of the arguments given to the function?


export const useIsTokenValid = () => {
const { data: token } = useQuery<string | null>(['token'], getToken, {
refetchOnMount: false,
});
return useQuery(['isTokenValid', token], validateToken, {
refetchOnMount: false,
enabled: typeof token !== 'undefined',
});
};


export const validateToken = async ({ queryKey }: WHAT_TYPE_SHOULD_I_PUT_HERE) => {
console.log('validating token');
const [_, token] = queryKey;
if (token) {
const res = await axios.get<boolean>(BACKEND_URL + '/', {
headers: {
Authorization: token,
},
});
return res.data;
} else {
return false;
}
};

What type should I put where there is "WHAT_TYPE_SHOULD_I_PUT_HERE"?


Edit:
As suggested, I gave the type


QueryFunction<
boolean,
[string, string | null | undefined]
>

to the function. I don't get errors anymore on the function, but I get errors on the useQuery where I call that function, even though the types are correct (I think).


Theese are the errors:



(alias) const validateToken: QueryFunction<boolean, [string, string |
null | undefined]> import validateToken No overload matches this call.
Overload 1 of 9, '(queryKey: QueryKey, queryFn: QueryFunction<boolean,
QueryKey>, options?: (Omit<UseQueryOptions<boolean, unknown, boolean,
QueryKey>, "queryKey" | ... 1 more ... | "queryFn"> & { ...; }) |
undefined): UseQueryResult<...>', gave the following error.
Argument of type 'QueryFunction<boolean, [string, string | null | undefined]>' is not assignable to parameter of type
'QueryFunction<boolean, QueryKey>'.
The type 'QueryKey' is 'readonly' and cannot be assigned to the mutable type '[string, string | null | undefined]'. Overload 2 of 9,
'(queryKey: QueryKey, queryFn: QueryFunction<boolean, QueryKey>,
options?: (Omit<UseQueryOptions<boolean, unknown, boolean, QueryKey>,
"queryKey" | ... 1 more ... | "queryFn"> & { ...; }) | undefined):
DefinedUseQueryResult<...>', gave the following error.
Argument of type 'QueryFunction<boolean, [string, string | null | undefined]>' is not assignable to parameter of type
'QueryFunction<boolean, QueryKey>'. Overload 3 of 9, '(queryKey:
QueryKey, queryFn: QueryFunction<boolean, QueryKey>, options?:
Omit<UseQueryOptions<boolean, unknown, boolean, QueryKey>, "queryKey"
| "queryFn"> | undefined): UseQueryResult<...>', gave the following
error.
Argument of type 'QueryFunction<boolean, [string, string | null | undefined]>' is not assignable to parameter of type
'QueryFunction<boolean, QueryKey>'.ts(2769)



More From » reactjs

 Answers
3

The type you are looking for is QueryFunctionContext, and it's exported from react-query:


import { QueryFunctionContext } from '@tanstack/react-query';
export const validateToken = async ({ queryKey }: QueryFunctionContext<[string, string | null | undefined]>) => {

You can see a working version in this typescript playground


[#39] Thursday, July 14, 2022, 2 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
bryonk

Total Points: 161
Total Questions: 116
Total Answers: 107

Location: Albania
Member since Sun, Nov 22, 2020
4 Years ago
bryonk questions
Sun, May 9, 21, 00:00, 3 Years ago
Tue, Mar 16, 21, 00:00, 3 Years ago
Tue, Sep 29, 20, 00:00, 4 Years ago
Wed, Aug 26, 20, 00:00, 4 Years ago
;