GraphQL 簡(jiǎn)介

GraphQL 是從遠(yuǎn)程服務(wù)器查詢數(shù)據(jù)的強(qiáng)大工具，也是我構(gòu)建 API 的首選方式。對(duì)一些人來(lái)說(shuō)，學(xué)習(xí)它可能有一定難度，因?yàn)榻坛掏ǔＪ褂?Apollo 或 Relay 等工具進(jìn)行編寫。

這些工具很不錯(cuò)，但通常更適用于復(fù)雜項(xiàng)目。在某些情況下，最好選擇更輕量級(jí)的方法，并且不要通過(guò)添加額外的庫(kù)增加包大小。

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

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

使用 Fetch 進(jìn)行 GET 請(qǐng)求

Fetch 是用于發(fā)送網(wǎng)絡(luò)請(qǐng)求的現(xiàn)代替代品，取代了較舊的 XMLHttpRequest 工具。它解決了從服務(wù)器獲取數(shù)據(jù)時(shí)出現(xiàn)的一些問(wèn)題，例如 Promise 鏈?zhǔn)教幚怼?/p>

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

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

以下是一個(gè)用于獲取數(shù)據(jù)簡(jiǎn)單請(qǐng)求示例：

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ù)中傳入了兩個(gè)參數(shù)，即 URL 和 options 參數(shù)。

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

隨后的 .then() 調(diào)用允許我們鏈?zhǔn)教幚懋惒?promise，這意味著你首先需要等待來(lái)自 API 的結(jié)果。如果成功，我們將獲得響應(yīng)，并使用 .json() 方法進(jìn)行轉(zhuǎn)換。

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

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

你會(huì)注意到 .catch() 方法尚未被觸發(fā)。如果一切正常運(yùn)行，只有成功的回調(diào)函數(shù)會(huì)被執(zhí)行；但是，如果我們?cè)谡?qǐng)求過(guò)程中遇到錯(cuò)誤，則會(huì)觸發(fā)錯(cuò)誤回調(diào)。

使用 Fetch 進(jìn)行 GraphQL 查詢

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

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

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

附加到請(qǐng)求的 GraphQL 文檔將如下所示：

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

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

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

現(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。在這種情況下，我們需要將選項(xiàng)指定為第二個(gè)參數(shù)。

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

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

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

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

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

總結(jié)

這是對(duì) GraphQL 查詢獲取用法的簡(jiǎn)要介紹，變體的原理實(shí)際上與查詢相同，即傳遞查詢和變量。

在復(fù)雜的項(xiàng)目中，你應(yīng)該使用 GraphQL 客戶端，如 Apollo、Relay 或其他。

當(dāng)你需要將項(xiàng)目規(guī)模保持在最低限度時(shí)，獲取具有重要作用。Axios 也是一種很好的獲取方式。使用獲取時(shí)，請(qǐng)務(wù)必考慮瀏覽器支持。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論