#v5 issue

14 messages · Page 1 of 1 (latest)

sharp zinc
#

Hi there,
I have a followig hook:

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?
#

v5 issue

wraith pulsar
sharp zinc
#

Ok, yeah well explained, only thing i could not find was how to refactor data returned, so far used to work with select, how shall i handle that in v5 ``` select: (data) => {
if (!data) return [];

  return Object.entries(data.data).map(([label, value]) => ({
    label,
    value,
  }));
},```
wraith pulsar
#

Not sure, I think select remained relatively unchanged

sharp zinc
#

no it did not... there is an error:

image.png
sharp zinc
#

Sorry, my bad... i typed in a wrong way, last thing: again comming back to my hook which works now: ```import { queryKeys } from "@/app/constants/queryKeys";
import { CURRENCIES_API } from "@/config/api";
import { useQuery } from "@tanstack/react-query";
import { useEffect } from "react";
import { toast } from "react-hot-toast";

type ExchangeRates = {
data: {
[currencyCode: string]: number;
};
};
export const useFetchCurrenciesQuery = () => {
const getCurrencyDataFn = async () => {
const response = await fetch(CURRENCIES_API);
const result: ExchangeRates = await response.json();
return result.data;
};

const currencies = useQuery({
queryKey: [queryKeys.currencies],
queryFn: getCurrencyDataFn,
select: (data) => {
if (!data) return [];
return Object.entries(data).map(([label, value]) => ({
label,
value,
}));
},
});

useEffect(() => {
if (currencies.error) {
toast.error("Something went wrong");
}
}, [currencies.error]);

useEffect(() => {
if (currencies.data) {
toast.success("Fetched data successfully");
}
}, [currencies.data]);

return {
currencies,
};
};

wraith pulsar
#

They'd all be on your currencies variable

sharp zinc
#

sorry to be a pain but not sure about it, i mean i can to smth like const {isLoading, data: currencies} = useQuery({ but when i do that i am getting errors here useEffect(() => {
if (currencies.error) {
toast.error("Something went wrong");
}
}, [currencies.error]);```

wraith pulsar
#

Doing it that way turns currencies into just your data, not the entire useQuery result. You can either do what you had as currencies.isFetching or destruct all the variables you want:

const { isFetching, error, data: currencies } = useQuery({
  ...
})
sharp zinc
#

Mint! all works, massive thank you @wraith pulsar just wondering would u know when would be the best time to set currencies to Zustand store? I am using Next.js and checking some possible options

wraith pulsar
#

The first link I sent you should give you some ideas on approaches to take

sharp zinc
#

great! will have a look, and the last thing: how can i set refresh data every 24 hours? Shall i set stale?