TypeScript: Custom useQuery hook v4

[AndrianStoikov]

Hi,

I have a custom useQuery hook that is controlled by Redux store and can globally disable API requests.

In v3 it looked like this

function useControlledQuery<
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
>(
  queryKey: TQueryKey,
  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
  options?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
): UseQueryResult<TData, TError> {
  const { reactQueryEnabled } = useSelector<RootState, GlobalState>((state) => state.global);

  // If react-query is enabled, leave the options decide when the queries are enabled or disabled
  const isEnabled = reactQueryEnabled ? options?.enabled : false;

  return useQuery<TQueryFnData, TError, TData, TQueryKey>(queryKey, queryFn, { ...options, enabled: isEnabled });
}

However, now in v4 I am not able to use the same hook because it shows .ts errors.

The useQuery types seem a bit overwhelming. What is the best way to achieve what I am trying to do?

Best,
Andrian

[TkDodo]

can you provide a typescript playground that we can tinker with?

/cc @mattpocock :)

[AndrianStoikov]

Hi @TkDodo,

Sure. Maybe a bit latter today.

[AndrianStoikov]

Hi @TkDodo,

This is pretty much my setup now. With the exact error I am seeing.

https://codesandbox.io/s/awesome-joliot-ouxd05?file=/src/useData.ts

It seems it comes from the useQueryOptions?: UseQueryOptions<string[]> I would appreciate if you can guide me how to properly setup these hooks.

Best,
Andy

[AndrianStoikov]

In the codesandbox I set the type

Omit<
    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
    "initialData"
  > & {
    initialData?: () => undefined;
  }

but I don't think it makes any difference if I just switch it back to

UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>

Since it fails again but inside useControlledQuery

[4ntke]

@AndrianStoikov try to upgrade package to version 4.0.9. This version allow passing options to useQuery without initialData.

[bombillazo]

I can confirm this is also happening for hooks autogenerated by graphql-codegen

 useQuery<CurrentAccountOp, TError, TData>(
    variables === undefined
      ? ['currentAccount']
      : ['currentAccount', variables],
    useApiRequester<CurrentAccountOp, CurrentAccountVariables>(
      CurrentAccountDocument,
    ).bind(null, variables),
    options, // <-- error here
  );

No overload matches this call.
  Overload 1 of 6, '(queryKey: QueryKey, queryFn: QueryFunction<CurrentAccountOp, QueryKey>, options?: (Omit<UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey>, "queryKey" | ... 1 more ... | "queryFn"> & { ...; }) | undefined): UseQueryResult<...>', gave the following error.
    Argument of type 'UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey> | undefined' is not assignable to parameter of type '(Omit<UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey>, "queryKey" | "initialData" | "queryFn"> & { ...; }) | undefined'.
      Type 'UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey>' is not assignable to type 'Omit<UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey>, "queryKey" | "initialData" | "queryFn"> & { ...; }'.
        Type 'UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey>' is not assignable to type '{ initialData?: (() => undefined) | undefined; }'.
          Types of property 'initialData' are incompatible.
            Type 'CurrentAccountOp | InitialDataFunction<CurrentAccountOp> | undefined' is not assignable to type '(() => undefined) | undefined'.
              Type 'CurrentAccountOp' is not assignable to type '() => undefined'.
                Type 'CurrentAccountOp' provides no match for the signature '(): undefined'.
  Overload 2 of 6, '(queryKey: QueryKey, queryFn: QueryFunction<CurrentAccountOp, QueryKey>, options?: (Omit<UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey>, "queryKey" | ... 1 more ... | "queryFn"> & { ...; }) | undefined): DefinedUseQueryResult<...>', gave the following error.
    Argument of type 'UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey> | undefined' is not assignable to parameter of type '(Omit<UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey>, "queryKey" | "initialData" | "queryFn"> & { ...; }) | undefined'.
      Type 'UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey>' is not assignable to type 'Omit<UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey>, "queryKey" | "initialData" | "queryFn"> & { ...; }'.
        Type 'UseQueryOptions<CurrentAccountOp, TError, TData, QueryKey>' is not assignable to type '{ initialData: CurrentAccountOp | (() => CurrentAccountOp); }'.
          Types of property 'initialData' are incompatible.
            Type 'CurrentAccountOp | InitialDataFunction<CurrentAccountOp> | undefined' is not assignable to type 'CurrentAccountOp | (() => CurrentAccountOp)'.
              Type 'undefined' is not assignable to type 'CurrentAccountOp | (() => CurrentAccountOp)'.ts(2769)