react-query：仅在状态变量更改时重新获取查询

Question

我有一个选择选项菜单。因此，当用户选择一个选项时，我希望发送一个GET请求到服务器，并从服务器接收过滤后的数据。

可以使用useEffect(() => {// 发送请求}, [criteria])实现这一点

因为，useEffect确保只有在setCriteria完成后才会将请求发送到服务器。

但是，我正在使用react-query库。所以，不允许在useEffect内部使用useQuery。

因此，请求在setState完成之前就发送到服务器了。 因此，服务器获取的是先前选择的值，而不是当前选择的值。

onChange:

<select
  name="filter"
  value={criteria}
  onChange={async (e) => {
    setCriteria(e.target.value);
  }}
>
  <option>Most recent First</option>
  <option>Price: Low to High</option>
  <option>Price: High to Low</option>
</select>;

获取帖子：

 const FetchPosts = async () => {
    const {
      data: { posts },
    } = await axios.get(`${process.env.API_URL}/api/posts`, {
      params: {
        filter: criteria,
      },
    });

    return posts;
  };

 useQuery("posts", FetchPosts);

 const posts = queryCache.getQueryData("posts");

- Ashik

Answer 1

您可以将您的条件用作查询关键字。每当查询的关键字更改时，查询将自动更新。

const FetchPosts = async ({criteria}) => {
    console.log(criteria) //from useQuery key

    //your get api call here with criteria params

    return posts;
};

const [criteria, setCriteria] = useState("")

const {isLoading, data: post} = useQuery(["posts", criteria], FetchPosts); //include criteria state to query key

console.log(post) 

<select
  name="filter"
  value={criteria}
  onChange={(e) => {
    setCriteria(e.target.value);  // trigger a re-render and cause the useQuery to run the query with the newly selected criteria
  }}
>
  <option>Most recent First</option>
  <option>Price: Low to High</option>
  <option>Price: High to Low</option>
</select>

- Chanandrei

---

我有一个不同的使用情况。如何在每个条件更改时不触发 useQuery？我只想在初始渲染和触发操作（例如：单击“应用筛选器”按钮）时获取数据。 - TA3

@TA3 我也有同样的疑问，有解决方案吗？ - asds_asds

@TA3 和 @asds_asds 如果您不将参数设置为查询键的一部分，则在标准更改时，您的查询将无法触发。例如：useQuery("thisIsAStaticKey", doSomething()); - IamButtman

谢谢你！我也可以对多个数组做这个操作吗？ - Bon Andre Opina

Answer 2

问题已经得到解答。以下是我的两分意见：

把 useQuery 的查询键当做 useEffect 的依赖数组来处理。每次键值变化时，都会执行查询操作。

如果你仍然想要控制查询的触发，可以尝试使用 useQuery 钩子中的 "enabled" 选项。

- av.dev

---

你好，我们能在 useQuery 的 GET 请求中发送 JSON 主体吗？ - Gurupal singh

Answer 3

将条件值传递给 useQuery 键会在值发生变化时触发函数执行，同时不要忘记将条件传递给 fetcher 以便与键一起使用。

const FetchPosts = async (criteria) => {
  const {
    data: { posts },
  } = await axios.get(`${process.env.API_URL}/api/posts`, {
    params: {
      filter: criteria,
    },
  });

  return posts;
};

const [criteria, setCriteria] = useState('');
useQuery(['posts', criteria], () => FetchPosts(criteria));

- William Suarez

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community