获取查询时数据未更新 - React-Query？

Question

我有一个三复选框类型，

当我选中任何框时，我会在

refetch()

中拨打

useEffect()

。 第一次，我选中所有复选框并返回预期数据！

但在某些情况下“随机重新更改复选框”，API 返回的数据是“未定义”尽管它返回Postman中的预期数据！

所以我想我是否需要为我想要获取的每个数据提供一个唯一的

queryKey

所以我提供了一个随机值“Date.now()”但仍然返回未定义

代码片段

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

Answer 1

所以经过聊天的一番阐述，这个问题可以通过利用 useQuery 键数组来解决。

由于它的行为类似于

useEffect

中的依赖数组，因此定义结果数据的所有内容都应插入其中。而不是触发

refetch

来更新数据。

这里的键可能如下所示：['getUpdatedPrice', item.id, ...Object.keys(bodyQuery.values)]，如果这些值发生变化并且在初始渲染时，它将触发新的获取。

Answer 2

发生了什么如果你的querykey相同但数据发生了变化，你如何生成一个新的请求？答案是：

import { useQuery, useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient();
queryClient.removeQueries(['getUpdatedPrice', fetch, bodyQuery])

重新获取会发出请求，但如果密钥没有改变，并不能保证数据会被更新