0

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

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

4

3 回答 3

0

react-query在其版本 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' })
  })
于 2021-12-30T03:36:14.777 回答
0

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

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} />
      ))
    }
  </>
}
于 2021-08-07T18:41:31.540 回答
0

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

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

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

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