在反应查询中过滤数据答案

【问题标题】：Filtering data in react-query在反应查询中过滤数据
【发布时间】：2022-08-23 14:21:08
【问题描述】：

我需要在我的组件中过滤电影。初始查询必须是所有电影。在我单击按钮（按钮名称，例如history/сomedy）后，我在我的反应组件中呈现的数据必须更改为来自此类查询的数据，其中只有历史或喜剧电影。我如何在反应查询中实现这一点。

【解决方案1】：

理想情况下，过滤应该发生在后端。这样，您只需将过滤后的电影名称作为查询键的一部分。如果键发生变化，React Query 将自动重新获取，并单独缓存每个条目过滤：

const [name, setName] = React.useState()
const { data } = useQuery(['movies', name], () => fetchMovies(name)))

如果您不在后端进行过滤，您可以只对从 useQuery 返回的数据运行过滤：

const [name, setName] = React.useState()
const { data } = useQuery(['movies'], () => fetchMovies()))

const result = filterByName(data, name)

这将很好地融入自定义钩子。

如果需要引用稳定性，您可以将结果创建包装在 useMemo 中：

const result = React.useMemo(() => filterByName(data, name), [data, name])

您还可以利用 react-query 的 select 选项：

const [name, setName] = React.useState()
const { data } = useQuery(
  ['movies'],
  () => fetchMovies()),
  {
    select: (response) => filterByName(response, name)
  }
)

在这种情况下，从useQuery 返回的data 已经被过滤掉了，你不必担心记忆。

【讨论】：

好的，非常感谢您的详细回答。我会试试。

【解决方案2】：

我想在 TkDodo 的答案中添加一些内容，如果您在反应查询中使用“选择”选项，它将不会记住结果，例如，如果你在“select”函数中进行昂贵的计算来转换你的数据，它会在每次渲染时运行，你的应用程序最终会变得迟缓。

【讨论】：