react-query：如何在初始渲染期间和触发操作时获取

Question

我有一个组件可以获取一堆帖子。这也有一组过滤器。

const [selectedCountry, setSelectedCountry] = useState(null);
const [selectedStatus, setSelectedStatus] = useState(null);

const getPosts = async (payload) => {
    const response = await fetchPosts(payload);
    return response;
};

const payload = {
  country: selectedCountry,
  status: selectedStatus,
};

const {isLoading, data: posts} = useQuery(['posts', payload], () => getPosts(payload));


const handleApplyFilters = () => {
  // refecth the posts with the applied filter payload
}

return (
  <>
    <select
        name="countryFilter"
        value={selectedCountry}
        onChange={(e) => {
          setSelectedCountry(e.target.value);
        }}>
          <option>Singapore</option>
          <option>Finland</option>
          <option>Portugal</option>
    </select>
    
    <select
        name="statusFilter"
        value={selectedStatus}
        onChange={(e) => {
          setSelectedStatus(e.target.value);
        }}>
          <option>Online</option>
          <option>Offline</option>
          <option>Blocked</option>
    </select>


    <button onClick={handleApplyFilters}>
      Apply Filters
    </button>
    
    {posts.map((post) => (
        <div>
          <div>{post.title}</div>
          <div>{post.description}</div>
        </div>
     ))}
  </>
)

我不确定如何使用 react-query 实现以下目标。

仅在初始渲染期间获取帖子
避免在每次过滤器更改时获取帖子（仅在单击 Apply Filter 按钮时重新获取）

Answer 1

您将 payload 放入 queryKey 中，您做对了。现在您要做的就是在选择某些内容时不立即更新本地状态，而是仅在用户点击应用时更新。为此，我会将过滤器放入它自己的组件中，它具有自己的状态，只有在单击应用时才会设置有效负载：

const [payload, setPayload] = React.useState(null)

const {isLoading, data: posts} = useQuery(['posts', payload], () => getPosts(payload));


<FilterForm onApply={setPayload} />

FilterForm 将包含两个选择的状态，当单击应用按钮时，它将构建有效负载并调用 onApply，后者将调用 setPayload在父级中，从而触发重新获取。

react-query：如何在初始渲染期间和触发操作时获取

react-query: How to fetch during the initial render and when an action is triggerd

reactjs

react-query