使用 React Query 过滤从 API 获取的列表

Question

我正在使用 React Query（第一次）来管理对 API 的调用。我正在获取发票列表，到目前为止我已经在下面的代码中成功完成了此操作。我现在想根据每个发票对象具有的状态属性（它是“已付款”、“待处理”或“草稿”）使用一系列复选框来过滤此列表。

我该怎么办呢？过滤是否可以以某种方式集成到对 API 的初始调用中，以便我始终接收一组数据，或者我是否必须进行多次调用并在下面相应地呈现数据？

import React from 'react'
import {useQuery} from 'react-query'
import InvoiceLink from './InvoiceLink'

const fetchData = async () => {
    const res = await fetch('http://localhost:3004/invoices');
    return res.json();
};


export default function InvoiceList() {
    const {data, isLoading, isError} = useQuery('invoices', fetchData);
    return (
        <div>
            <ul>
                <li><input type="checkbox" id="paid"></input><label htmlFor="paid">Paid</label></li>
                <li><input type="checkbox" id="pending"></input><label htmlFor="pending">Pending</label></li>
                <li><input type="checkbox" id="draft"></input><label htmlFor="draft">Draft</label></li>
            </ul> 
            {isError && (
                <p>Error</p>
            )}
            {isLoading && (
                <p>Loading</p>
            )}
            <ul>
            {data && data.map(item => 
                <InvoiceLink key={item.id} invoice={item} />
            )}
            </ul>
        </div>
    )
}

Answer 1

您可以按照此处所述进行本地过滤，或者，如果您想在后端进行过滤，则需要：

• 将过滤条件保存在本地状态
• 将过滤条件添加到query-key以触发自动重新获取（每次key更改时react-query都会重新获取）
• 将过滤条件传递给 fetchFn，然后传递给后端
• 可能用于keepPreviousData: true更好的用户体验 - 请参阅滞后查询

就像是：

const fetchData = async (filter) => {
    const res = await fetch(`http://localhost:3004/invoices/${filter}`);
    return res.json();
};

const [filter, setFilter] = React.useState('all')
const {data, isLoading, isError} = useQuery(['invoices', filter], () => fetchData(filter));

另外，我想指出，由于您正在使用fetch，您需要将错误的响应转换为失败的承诺，因为react-query 期望失败的承诺，但fetch不会开箱即用。请看这里