react query with typescript

Question

I'm trying to use react guery to get some sata from this funcktion.

export const quotaReservationRefundServiceBankAccount = (
  id: string,
  bankAccountInformation: IBankAccountInformation,
  quotaLegal?: string,
): Promise<Response> => {
  const url = `${appSettings.bffUrl}/api/pregnancies/quotareservations/${id}/bankaccount/refund`;
  const body: IRefundQuotaReservationRequest = {
    language: appSettings.language,
    bankAccountInformation,
    legalDepartmentShortCode: quotaLegal || "",
  };
  return post(url, body);
};

I have gotten this fare:

  const { data: testData, isLoading, error } = useQuery<string, IBankAccountInformation, string | undefined>(["bankRefundResponse",  quota?.reservation || "Quota.reservation missing", bankAccountInfo, quota.legal], quotaReservationRefundServiceBankAccount, {

      });

Typescript gives me this error:

Argument of type '(id: string, bankAccountInformation: IBankAccountInformation, quotaLegal?: string | undefined) => Promise' is not assignable to parameter of type 'QueryFunction<string, QueryKey>'.ts(2345)

Answer 1

parameters are passed to the queryFn via the queryKey, so you can either destruct the queryKey (first argument to the queryFn) or just use an inline function:

useQuery(["key", id, bankAccountInformation, quota], () => quotaReservationRefundServiceBankAccount(id, bankAccountInformation, quota))