javascript - 如何在 React + Apollo GraphQL 中查询先前查询的结果？

Question

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

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

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

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

Answer 1

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

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

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

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