React 查询选择器答案

【问题标题】：React Query selectorsReact 查询选择器
【发布时间】：2020-10-27 12:33:41
【问题描述】：

我在我的项目中使用react-query，效果很好

我想知道 react-query 是否有选择器功能。例如，我使用 react-query 来获取帖子列表，并且只想过滤已完成的帖子。我想缓存过滤结果，这样下次我再次过滤列表时，它可以返回缓存。基本上我想要的功能和selectors的recoil一样

【问题讨论】：

标签： reactjs react-query

【解决方案1】：

react-query 在version 3 的发布中增加了对选择器的一流支持。

以下是库中的示例用法：

it('should be able to select a part of the data with select', async () => {
    const key = queryKey()
    const states: UseQueryResult<string>[] = []

    function Page() {
      const state = useQuery(key, () => ({ name: 'test' }), {
        select: data => data.name,
      })
      states.push(state)
      return null
    }

    renderWithClient(queryClient, <Page />)

    await sleep(10)

    expect(states.length).toBe(2)
    expect(states[0]).toMatchObject({ data: undefined })
    expect(states[1]).toMatchObject({ data: 'test' })
  })

【讨论】：

【解决方案2】：

请务必记住，react-query 不提供本地状态。所有获取的数据都是服务器状态的临时表示（缓存）。它实现了 SWR (stale-while-revalidate) 模式。

虽然你可以通过从react-query提供的缓存中选择数据来实现你想要的（你需要自己做，没有选择器）如果你使用分页或者你的数据立即变得陈旧可能会很棘手(default lib behaviour)。

因此，假设您的数据是服务器状态的临时表示，最好在查询键中包含过滤器，这样您最终会进行不同的查询，并对不同的过滤器组合拥有不同的独立缓存条目。这样：

您不需要选择器
你只取你需要的东西
当您更改过滤器时，您可以访问缓存数据（如果有），而react-query 在后台重新获取。这取决于你如何配置react-query

【讨论】：

感谢您的回答。我询问了 react-query 团队，他们说选择器功能将在下一个版本中添加

【解决方案3】：

我不知道内置的原生选择器解决方案，但您可以使用自定义挂钩来实现。

function useMostPopularPosts(){
  const postsResult = useQuery(postsQueryParams)
  const mostPopularResult = useQuery(popularPostsQueryParams)

  if (!(postsResult.success && mostPopularResult.success)){
    return []; 
  }

  return postsResult.data.filter(
    post=> mostPopularResult.data.includes(post.id)
  )

 
}

function MostPopularPosts(){
  const popularPosts = usePopularPosts()

  return <>
    {
      popularPosts.map(post=>(
        <PostHighlight post={post} />
      ))
    }
  </>
}

【讨论】：