如何在 React + Apollo GraphQL 中使用先前查询的结果进行查询？

问题描述

在我的一个组件中，我立即查询我的后端。之后，我想用我第一个查询的数据再次查询我的后端，所以我第二个查询的变量来自第一个。

我已经尝试过 useLazyQuery 但它要么不起作用，要么我放置的位置不正确。我试过在 skip 钩子中使用 useQuery 但它似乎不起作用，因为我是我测试跳过的条件，也是我正在使用的变量查询本身，我正在检查它是否已定义。

我宁愿不使用 compose，因为我主要在我的 React 组件中使用钩子，我不确定如何构建它们并将它们与我的代码相适应。

我还分别使用了两个查询结果。我的后端结构像一棵树，所以我同时使用一个节点和它的子节点。

解决方法

如果可以避免的话，我不会为此使用 useLazyQuery，因为它的查询生命周期与更常见的 useQuery 不同。它可以工作，但让我们尝试使用 useQuery。

您希望无条件执行第一个查询 query1。很简单。

您希望第二个查询 query2 仅在 query1 返回结果时执行。然后是根据 skip 返回的内容在 query2 上使用 query1 的问题。最简单的形式：

const { loading: loading1,error: error1,data: data1 } = useQuery('...query1...');
const { loading: loading2,error: error2,data: data2 } = useQuery('...query2...',{
  variables: {
    myVariable: data1 && data1.path.to.data,}
  skip: !data1,// This is simpler that checking error1 and loading1.
});

此外，如果第一个查询没有返回足够的结果，您可能希望阻止第二个查询的执行。根据您的确切架构和查询，它可能是这样的：

  skip: !data1 || !data1.searchForIDs || data1.searchForIDs.length === 0