fetchQuery

fetchQuery

如果您想在 React 之外提取查詢，可以使用 react-relay 中的 fetchQuery 函數

// You should prefer passing an environment that was returned from useRelayEnvironment()
const MyEnvironment = require('MyEnvironment');
const {fetchQuery} = require('react-relay');

fetchQuery(
  environment,
  graphql`
    query AppQuery($id: ID!) {
      user(id: $id) {
        name
      }
    }
  `,
  {id: 4},
)
.subscribe({
  start: () => {...},
  complete: () => {...},
  error: (error) => {...},
  next: (data) => {...}
});

引數

• environment：Relay 環境實例，用於執行請求。如果您在 React 元件內某處開始此請求，您可能需要使用從 useRelayEnvironment 取得的環境。
• query：要提取的 GraphQL 查詢，使用 graphql 樣板字串指定。
• variables：包含要提取查詢的變數值的物件。這些變數需要與查詢中宣告的 GraphQL 變數相符。
• options：[選填] 選項物件
  • networkCacheConfig：[選填] 包含快取設定選項的物件
    • force：布林值。如果為 true，則會略過網路回應快取。預設值為 true。

Flow 類型參數

• TQuery：類型參數，應對應指定查詢的 Flow 類型。此類型可從自動產生檔案匯入：<query_name>.graphql.js。它將確保可觀測資料提供的資料類型與查詢的形狀相符，並強制傳遞至 fetchQuery 的 variables 與查詢預期的變數類型相符。

回傳值

• observable：回傳可觀察實例。若要開始請求，必須在可觀察實例上呼叫 subscribe 或 toPromise。公開下列方法
  • subscribe：可呼叫以訂閱網路請求的可觀察實例的函數。請記住，這只會讓您訂閱查詢的提取，而不是訂閱 Relay 儲存區中資料的任何後續變更。
    • 引數
      • observer：指定網路請求可觀察實例上發生的不同事件的觀察者函數的物件。可以將下列事件處理常式指定為觀察者物件中的鍵
        • start：網路請求開始時將呼叫的函數。它將接收單個 subscription 引數，表示網路可觀察實例的訂閱。
        • complete：網路請求成功完成時將呼叫的函數。
        • next：每次從網路收到酬載時將呼叫的函數。它將接收單個 data 引數，表示從伺服器收到酬載時從 Relay 儲存區讀取的查詢資料快照。
        • error：如果在網路請求期間發生錯誤，則將呼叫的函數。它將接收單個 error 引數，其中包含發生的錯誤。
        • unsubscribe：每次取消訂閱時將呼叫的函數。它將接收單個 subscription 引數，表示網路可觀察實例的訂閱。
    • 回傳值
      • subscription：表示可觀察實例訂閱的物件。呼叫 subscription.unsubscribe() 將取消網路請求。
  • toPromise:
    • 回傳值
      • promise：回傳一個 Promise，將在收到伺服器的第一個網路回應時解析。如果請求失敗，Promise 將拒絕。無法取消。

行為

• fetchQuery 會自動將提取的資料儲存到記憶體中的 Relay 儲存區，並通知任何訂閱相關資料的元件。
• fetchQuery 將 不會 保留查詢的資料，這表示不能保證資料在請求完成後的任何時間點都將保留在 Relay 儲存區中。如果您希望確保資料保留在請求範圍之外，則需要直接對查詢呼叫 environment.retain()，以確保它不會被刪除。如需詳細資訊，請參閱我們關於 控制 Relay 的 GC 原則 的章節。
• fetchQuery 將自動取消重複同時進行且使用 fetchQuery 啟動的相同網路請求（相同的查詢和變數）。

使用 .toPromise() 的行為

如果需要，您可以使用 **.toPromise()** 將請求轉換為 Promise。請注意，toPromise 將啟動查詢並回傳一個 Promise，該 Promise 將在伺服器回傳第一個資料時解析並取消進一步處理。這表示查詢中的任何延遲或 3D 資料可能不會被處理。基於此原因，我們通常建議不要使用 toPromise()。

const {fetchQuery} = require('react-relay');

fetchQuery(
  environment,
  graphql`
    query AppQuery($id: ID!) {
      user(id: $id) {
        name
      }
    }
  `,
  {id: 4},
)
.toPromise() // NOTE: don't use, this can cause data to be missing!
.then(data => {...})
.catch(error => {...};

• toPromise 回傳一個 Promise，將在收到伺服器的第一個網路回應時解析。如果請求失敗，Promise 將拒絕。無法取消。

---

此頁面是否實用？

協助我們回答幾個快速問題，讓網站變得更好 回答幾個快速問題.