TanStackT
TanStack3y ago
13 replies
brilliant-lime

v5 issue

Hi there,
I have a followig hook:
import { queryKeys } from "@/app/constants/queryKeys";
import { CURRENCIES_API } from "@/config/api";
import { CurrencyOption } from "@/src/currencyStore";
import { useQuery } from "@tanstack/react-query";
import { toast } from "react-hot-toast";

type CurrencyData = {
    [currencyCode: string]: string | number;
  };

export const useFetchCurrenciesQuery = () => {
  const getCurrencyDataFn = async () => {
    const response = await fetch(CURRENCIES_API);
    const result: CurrencyData = await response.json();
    return result;
  };


  return useQuery<CurrencyData, Error>({
    queryKey: [queryKeys.currencies],
    queryFn: getCurrencyDataFn,
    select: (data) => {
      if (!data) return [];

      return Object.entries(data.data).map(([label, value]) => ({
        label,
        value,
      }));
    },
    onSuccess: () => {
        toast.success("Fetched data successfully");
    },
    onError: (error: unknown) =>
      toast.error(`Something went wrong: ${error}`),
  });
};
no matter what i do there is a TS error:

Type '(data: CurrencyData) => { label: string; value: any; }[]' is not assignable to type '(data: CurrencyData) => CurrencyData'.ts(2769)
queryClient-13f81fcb.d.ts(415, 5): The expected type comes from property 'select' which is declared here on type 'UndefinedInitialDataOptions<CurrencyData, Error, CurrencyData, QueryKey>'
queryClient-13f81fcb.d.ts(415, 5): The expected type comes from property 'select' which is declared here on type 'DefinedInitialDataOptions<CurrencyData, Error, CurrencyData, QueryKey>'
queryClient-13f81fcb.d.ts(415, 5): The expected type comes from property 'select' which is declared here on type 'UseQueryOptions<CurrencyData, Error, CurrencyData, QueryKey>'
Is this smth with implementation? v3 did not give me that errors... how can i fix it?
Was this page helpful?