使用Fetch API執(zhí)行GraphQL查詢和變體問題

更新時間：2024年04月22日 10:53:30 作者：一紙忘憂

這篇文章主要介紹了使用Fetch API執(zhí)行GraphQL查詢和變體問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

GraphQL 簡介

GraphQL 是從遠程服務(wù)器查詢數(shù)據(jù)的強大工具，也是我構(gòu)建 API 的首選方式。對一些人來說，學習它可能有一定難度，因為教程通常使用 Apollo 或 Relay 等工具進行編寫。

這些工具很不錯，但通常更適用于復雜項目。在某些情況下，最好選擇更輕量級的方法，并且不要通過添加額外的庫增加包大小。

在這種情況下，你可以直接使用瀏覽器中提供的工具，在本快速教程中，我們將使用在你的瀏覽器中通?？捎玫?fetch。

讓我們首先簡單地回顧一下 fetch 是什么以及它如何通常與 REST API 一起使用，在這之后我們就可以開始執(zhí)行簡單的 GraphQL 查詢了。

使用 Fetch 進行 GET 請求

Fetch 是用于發(fā)送網(wǎng)絡(luò)請求的現(xiàn)代替代品，取代了較舊的 XMLHttpRequest 工具。它解決了從服務(wù)器獲取數(shù)據(jù)時出現(xiàn)的一些問題，例如 Promise 鏈式處理。

雖然我們不會在本文詳細討論較舊的 XMLHttpRequest，但重要的是因歷史原因你需要知道 fetch 在較舊的瀏覽器中不受支持。

關(guān)于 fetch 在瀏覽器之外的使用，在 Node.js 17 中你可以作為實驗性功能直接使用它，在較早版本中，你可以安裝比如 node-fetch 庫。

以下是一個用于獲取數(shù)據(jù)簡單請求示例：

const url = 'https://query1.finance.yahoo.com/v8/finance/chart/BTC-USD'

const options = {
  method: 'GET',
}

fetch(url, options)
  .then((response) => {
    return response.json()
  })
  .then((data) => {
    const res = data.chart.result
    console.info(res)
    return res
  })
  .catch((err) => {
    console.log('err', err)
  })

我們可以看到在 fetch 函數(shù)中傳入了兩個參數(shù)，即 URL 和 options 參數(shù)。

options 用于附加配置，比如請求的方法、頭部信息、跨源資源共享（CORS）配置以及 POST 請求時的主體內(nèi)容。

隨后的 .then() 調(diào)用允許我們鏈式處理異步 promise，這意味著你首先需要等待來自 API 的結(jié)果。如果成功，我們將獲得響應，并使用 .json() 方法進行轉(zhuǎn)換。

然后再次等待轉(zhuǎn)換結(jié)果，在這里最終可以將數(shù)據(jù)記錄到控制臺上。

{
  "data": {
    "allFilms": {
      "films": [
        {
          "title": "A New Hope",
          "releaseDate": "1977-05-25"
        },
        {
          "title": "The Empire Strikes Back",
          "releaseDate": "1980-05-17"
        }
      ]
    }
  }
}

你會注意到 .catch() 方法尚未被觸發(fā)。如果一切正常運行，只有成功的回調(diào)函數(shù)會被執(zhí)行；但是，如果我們在請求過程中遇到錯誤，則會觸發(fā)錯誤回調(diào)。

使用 Fetch 進行 GraphQL 查詢

在先前的示例中，我們使用了雅虎金融的公共 REST API 來執(zhí)行 GET 請求以檢索數(shù)據(jù)。在第二個示例中，我們需要 Star Wars API 的 GraphQL 接口。

GraphQL 提供了所謂的模式內(nèi)省，它允許我們輕松地記錄可以從服務(wù)器檢索到什么數(shù)據(jù)，你可以在文檔鏈接中看到。

為了執(zhí)行 GraphQL 查詢，我們需要使用 POST 方法，設(shè)置內(nèi)容為 application/json，并且將字符串化的 GraphQL 文檔發(fā)送至 JSON 主體。

附加到請求的 GraphQL 文檔將如下所示：

query ($first: Int) {
  allFilms(first: $first) {
   films {
    title
    releaseDate
   }
  }
}

查詢類似于 REST API 中的 GET 請求，只檢索數(shù)據(jù)。使用 GraphQL，我們需要準確描述要檢索的數(shù)據(jù)。你可以看到我們已經(jīng)指定了要檢索具有標題和發(fā)布日期的電影。

$first 是所謂的變量，這是必要的以將動態(tài)數(shù)據(jù)傳遞給查詢，并允許我們從查詢中獲取前 n 個電影。

現(xiàn)在讓我們轉(zhuǎn)換成 JavaScript 代碼：

const url = 'https://swapi-graphql.netlify.app/.netlify/functions/index';

const GET_FILMS = `query ($first: Int) {
  allFilms(first: $first) {
   films {
    title
    releaseDate
   }
  }
}`;

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: GET_FILMS,
    variables: {
      first: 2
    }
  })
};

const fetchAPI = async () => {
  try {
    const result = await fetch(
      url,
      options
    );
    const data = await result.json();
    console.info(data);
  } catch (err) {
    console.info(err)
  }
}
await fetchAPI();

我們已經(jīng)為 GraphQL API 和我們的 GraphQL 文檔定義了 URL。在這種情況下，我們需要將選項指定為第二個參數(shù)。

如上所述，選項方法需要設(shè)置為 POST，并且內(nèi)容應該設(shè)置為 application/json。body 應該是有兩個鍵的字符串化 JSON:

query：我們將傳遞 GraphQL 文檔
variables：這些變量應該與服務(wù)器上文件和模式中的變量定義匹配

你還可以注意到，在第一個使用 GET 請求的示例中, 我們使用了 .thenable() Promise 鏈接方式，但在此處我們已經(jīng)使用了 async await。

現(xiàn)在，當我們執(zhí)行結(jié)果時,我們會得到以下結(jié)果：

{
  "data": {
    "allFilms": {
      "films": [
        {
          "title": "A New Hope",
          "releaseDate": "1977-05-25"
        },
        {
          "title": "The Empire Strikes Back",
          "releaseDate": "1980-05-17"
        }
      ]
    }
  }
}