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

Question

我有一个选择选项菜单。因此，当用户选择一个选项时，我想使用该选项向服务器发送一个 GET/请求，并从服务器接收过滤后的数据。
这可以使用 useEffect(() => {//send the request}, [criteria]) 来实现
因为，useEffect 确保只有在 setCriteria 完成后，请求才会发送到服务器。
但是，我正在使用 react-query图书馆。因此，不允许使用 useQuery里面 useEffect .
结果，请求在 setState 完成之前被发送到服务器。
因此，服务器获取先前选择的值，而不是当前选择的值。
改变:

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

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>