Error on queryFn

[ImamJanjua]

I am getting error on the queryFn in useQuery but i don't know why. Like the function is just a normal async func.

No overload matches this call. Overload 1 of 3, '(options: DefinedInitialDataOptions<{ label: string; value: string; }[], Error, { label: string; value: string; }[], string[]>, queryClient?: QueryClient | undefined): DefinedUseQueryResult<...>', gave the following error. Type '(input: string) => Promise<{ label: string; value: string; }[]>' is not assignable to type 'unique symbol | QueryFunction<{ label: string; value: string; }[], string[], never> | undefined'. Type '(input: string) => Promise<{ label: string; value: string; }[]>' is not assignable to type 'QueryFunction<{ label: string; value: string; }[], string[], never>'. Types of parameters 'input' and 'context' are incompatible. Type '{ queryKey: string[]; signal: AbortSignal; meta: Record<string, unknown> | undefined; pageParam?: unknown; direction?: unknown; }' is not assignable to type 'string'. Overload 2 of 3, '(options: UndefinedInitialDataOptions<{ label: string; value: string; }[], Error, { label: string; value: string; }[], string[]>, queryClient?: QueryClient | undefined): UseQueryResult<...>', gave the following error. Type '(input: string) => Promise<{ label: string; value: string; }[]>' is not assignable to type 'unique symbol | QueryFunction<{ label: string; value: string; }[], string[], never> | undefined'. Overload 3 of 3, '(options: UseQueryOptions<{ label: string; value: string; }[], Error, { label: string; value: string; }[], string[]>, queryClient?: QueryClient | undefined): UseQueryResult<...>', gave the following error. Type '(input: string) => Promise<{ label: string; value: string; }[]>' is not assignable to type 'unique symbol | QueryFunction<{ label: string; value: string; }[], string[], never> | undefined'.ts(2769) types-BtrVwz9w.d.ts(565, 5): The expected type comes from property 'queryFn' which is declared here on type 'DefinedInitialDataOptions<{ label: string; value: string; }[], Error, { label: string; value: string; }[], string[]>' types-BtrVwz9w.d.ts(565, 5): The expected type comes from property 'queryFn' which is declared here on type 'UndefinedInitialDataOptions<{ label: string; value: string; }[], Error, { label: string; value: string; }[], string[]>' types-BtrVwz9w.d.ts(565, 5): The expected type comes from property 'queryFn' which is declared here on type 'UseQueryOptions<{ label: string; value: string; }[], Error, { label: string; value: string; }[], string[]>' (property) queryFn?: unique symbol | QueryFunction<{ label: string; value: string; }[], string[], never> | undefined

[stevan-borus]

You want to use a direct reference of getAddressPredictions for queryFn which requires a different type:

type QueryFunction<T = unknown, TQueryKey extends QueryKey = QueryKey, TPageParam = never> = (context: QueryFunctionContext<TQueryKey, TPageParam>) => T | Promise<T>;

try

queryFn: () => getAddressPredictions(input)

you will also need to pass input as a prop into the hook

[ImamJanjua]

@stevan-borus I dont know if its different with useQuery both if i use useMutation i just give the function for mutation in the custoom hook, so when i am using it the mutate func I only have to pass the params to the mutate func and not the hook itself. Could u maybe give a example

[stevan-borus]

Well, mutation function has a bit different type from queryFn.

type MutationFunction<TData = unknown, TVariables = unknown> = (variables: TVariables) => Promise<TData>;

As you can see QueryFunction expects context: QueryFunctionContext<TQueryKey, TPageParam> as a prop and MutationFunction expects generic variables.

Here is how your hook should look like:

export function useGetAddressPredictions(input: string) {
   return useQuery({
      queryKey: ['address-predictions', input],
      queryFn: () => getAddressPredictions(input)
   })
}

You don't have to pass that context prop to a queryFn.

What you cannot do, is pass a string to it like you wanted to do it with getAddressPredictions