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

Posted 2023-03-10

【中文标题】如何在 React + Apollo GraphQL 中查询先前查询的结果？

【英文标题】：How to query with result of prior query in React + Apollo GraphQL?

【发布时间】：2021-08-05 16:19:28

【问题描述】：

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

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

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

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

【参考方案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