在react-query中过滤数据

Question

我需要在我的组件中过滤电影。初始查询必须是所有电影。在我单击按钮（按钮名称例如history/\xd1\x81omedy）后，我在反应组件中渲染的数据必须更改为仅包含历史记录或\xd1\x81omedian 电影的此类查询的数据。我怎样才能在react-query中实现这一点？

\n

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])

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

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

在这种情况下，data返回的 fromuseQuery将已经被过滤，并且您不必担心记忆。