使用react-query运行多个查询

Question

我有一个表，其中包含每行不同fetch的数据。每一行还将能够独立于其他行触发fetch。如果每一行都是一个组件，并且有一个按钮可以重新获取，那么实现起来就很容易。我只是将call useQuery放入每行(一个组件)。

问题在于过滤和排序，因为获取的数据只在行上，所以没有包含所有信息的全局列表。

我试着用useQueries实现它，或者仅仅使用组件。但我只想出了一些粗糙的解决方案。其中之一是让行组件调用useQuery，并在父级上设置一个值(useState)。这看起来像是我在两个级别设置相同的数据，如果我得到一个虚拟化行的大表，组件内的useQuery不会被触发，因为组件没有被创建。

这个问题很难描述，所以如果有需要澄清的部分，请让我知道。

===

这不是真正的代码，只是尝试表示我所拥有的代码：

function Row({cell}) {
  const [fetch, setFetch] = useState(null);
  const query = useQuery(["somekey", refetch], fetchFn(cell.url))

  const refetch = () =>setFetch(Date.now())

  return (<div onClick={refetch}>{query.data.value}</div)
}

function Table({array}) {
 return (<div>
          {array.map(el => <Row cell={el}/>})}
        </div>)
}

Answer 1

这通常不是使用react-query实现的最简单的方法，因为它没有规范化的缓存，但下面是我解决这个问题的方法：

行有一个列表查询:行有其自己的查询：useQuery('myList', id)

• I将使用列表查询中的数据预先填充详细信息查询，并避免在装载每行时进行不必要的提取。

• 当您重新获取单行时，您可以：
• 重新获取一个详细信息查询，如您所说，使用来自该详细信息查询的新数据(使用queryClient.setQueryData)

)更新列表的查询数据

当然，如果你只有一个列表查询并在上面操作所有东西，所有这些都会更容易，但是你不能单独重新获取一行-你总是会重新获取整个列表。通常，这也不是太糟糕。使用上面的方法，你会进入细节和列表查询之间的“同步”状态-也不是很好。