如何在 React + Apollo GraphQL 中查詢先前查詢的結果？

Question

在我的一個組件中，我立即查詢我的后端。 之后，我想用第一個查詢中的數據再次查詢我的后端，所以我的第二個查詢的變量來自第一個。

我試過useLazyQuery但要么它不起作用，要么我放錯了位置。 我已經嘗試在useQuery掛鈎中使用skip但它似乎不起作用，因為我是我測試要跳過的條件，也是我用於查詢本身的變量，我正在檢查它是否被定義。

我寧願不使用compose ，因為我主要在我的 React 組件中使用鈎子，我不確定如何構造它們並將它們與我的代碼相匹配。

我也分別使用這兩個查詢結果。 我的后端結構像一棵樹，所以我同時使用一個節點及其子節點。

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