javascriptreactjsreact-nativereact-query

Data Not updated when fetch query - React-Query?


I have a three-check box type,

When I check any box I call refetch() in useEffect(). The first time, I check all boxes and that returns the expected data!

UI

but for some cases "rechange the checkboxes randomly", the returned data from API is "undefined" although it returns the expected data in Postman!

So I Guess should I need to provide a unique queryKey for every data that I want to fetch

so I provide a random value "Date.now()" but still return undefined

Code snippet

 type bodyQuery = {
    product_id: number;
    values: {};
  };
  const [fetch, setFetch] = useState<number>();
  const [bodyQuery, setBodyQuery] = useState<bodyQuery>({
    product_id: item.id,
    values: {},
  });

 const {
    data: updatedPrice,
    status,
    isFetching: loadingPrice,
    refetch,
  } = useQuery(
    ['getUpdatedPrice', fetch, bodyQuery],
    () => getOptionsPrice(bodyQuery),
    {
      enabled: false,
    },
  );

  console.log('@bodyQuery: ', bodyQuery);
  console.log('@status: ', status);
  console.log('@updatedPrice: ', updatedPrice);

  useEffect(() => {
    if (Object.keys(bodyQuery.values).length > 0) {
      refetch();
    }
  }, [bodyQuery, refetch]);



export const getOptionsPrice = async (body: object) => {
  try {
    let response = await API.post('/filter/product/price', body);
    return response.data?.detail?.price;
  } catch (error) {
    throw new Error(error);
  }
};

Solution

  • So after some elaboration in the chat, this problem can be solved by leveraging the useQuery key array.

    Since it behaves like the dependency array in the useEffect for example, everything that defines the resulted data should be inserted into it. Instead of triggering refetch to update the data.

    Here the key could look like this: ['getUpdatedPrice', item.id, ...Object.keys(bodyQuery.values)], which will trigger a new fetch if those values change and on initial render.