时间戳

首页 > 解决方案 > 如何在 React + Apollo GraphQL 中查询先前查询的结果？

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

问题描述

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

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

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

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

标签： javascriptreactjsreact-hooksapollo

解决方案

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

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

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

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

推荐阅读