在反应查询中过滤数据

Question

我需要在我的组件中过滤电影。初始查询必须是所有电影。在我点击按钮（按钮名称例如 historical/сomedy）之后，我在反应组件中呈现的数据必须更改为来自此类查询的数据，这些查询仅包含历史或 сomedian 电影。我怎样才能在反应查询中实现这一点。

Answer 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 将已经被过滤，您不必担心记忆。

在反应查询中过滤数据

Filtering data in react-query

reactjs

react-query