Data Not updated when fetch query - React-Query?

Question

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!

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);
  }
};

Why do you call refetch in the useEffect? What happens if you click on an item? — Domino987
– Domino987, Commented Mar 27, 2021 at 15:22
@Domino987 I call refetch just if the bodyQuery changed because without calling it in useEffect the data not fetched status: Idle — Oliver D
– Oliver D, Commented Mar 27, 2021 at 15:28
So if you remove the enabled: false, it will be fetched on render, if is stale or not fetched yet. and use this as key: ['getUpdatedPrice', item.id] — Domino987
– Domino987, Commented Mar 27, 2021 at 15:29
@Domino987 after doing what u said, the first time the query fetched once But when I click on any item 'checkbox' the data not fetched anymore — Oliver D
– Oliver D, Commented Mar 27, 2021 at 15:39
Yes you need to invaldiate it on click, so call refetch on click of the item or queryClient.invalidateQueries(['getUpdatedPrice', item.id]) to get the new data. — Domino987
– Domino987, Commented Mar 27, 2021 at 15:41

Domino987 · Accepted Answer · 2021-03-27 18:43:32Z

7

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.

answered Mar 27, 2021 at 18:43

Domino987

8,8642 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Juan Diego Ramirez Over a year ago

but if the get parameters do not change? and the backend response is different, how can the data be updated?

Domino987 Over a year ago

@JuanDiegoRamirez please share some code or anything

Collectives™ on Stack Overflow

Data Not updated when fetch query - React-Query?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related