探索 GraphQL 的 JavaScript 客戶端庫

如果您想通過前端 Web 應用程序與 GraphQL API 進行交互，您有很多選擇。 GraphQL.org 目前列出了 11 個 JavaScript 客戶端庫，當然，您可以使用普通的舊 JavaScript。在這篇文章中，我將回顧 JavaScript 中 GraphQL 客戶端庫的一些選項，以及使它們各自獨一無二的一些特性。

這篇文章的示例代碼可以在這裡找到。它具有使用這些庫中的每一個構建的相同基本 Next.js 站點。雖然它只涵蓋了發出 GraphQL API 請求的基本功能，但它可以說明每個庫的使用方式的一些差異。 （注意：要在本地運行示例，您需要創建一個 .env 文件並定義一個 GITHUB_API_TOKEN 帶有您可以在此處生成的個人訪問令牌）。

GraphQL 請求

GraphQL Request 是一個由 Prisma Labs 創建和維護的庫。我選擇從這個庫開始，因為它被有意設計為“最小的”，這意味著它不包含您在其他一些客戶端中可以找到的許多額外功能。基本上，GraphQL Request 只為您提供在瀏覽器或 Node 中輕鬆發送和接收 GraphQL 查詢和突變所需的東西，並且有意提供更多。這確實使 GraphQL Request 非常輕量級，並且在許多情況下可能滿足您的所有需求。

讓我們看幾個簡單的例子。要執行基本查詢，您需要做的就是 npm install 然後導入 graphql-request：

import { request, gql } from 'graphql-request';

接下來，您只需傳遞您的 API URL 和要執行的 GraphQL 查詢。

const query = gql`
  {
    continents {
      name
      code
    }
  }
`;
const results = await request('https://countries.trevorblades.com/', query);

要傳遞一個變量，只需提供一個變量參數以及包含帶有變量的 JSON：

const query = gql`
  query getContinent($code: ID!) {
    continent(code: $code) {
      name
      countries {
        name
      }
    }
  }
`;
const variables = {
  code: code,
};
const results = await request(
  'https://countries.trevorblades.com/',
  query,
  variables
);

如果您需要將授權標頭傳遞給 GraphQL API，您可以實例化 GraphQLClient 帶有端點 URL 和標頭變量。完成後，您可以調用 request() 該客戶端上的方法。

const graphQLClient = new GraphQLClient('https://api.github.com/graphql', {
headers: {
    authorization: 'bearer ' + process.env.GITHUB_API_TOKEN,
},
});
const query = gql`
{
    viewer {
    name
    twitterUsername
    bio
    }
}
`;
const results = await graphQLClient.request(query);

使用 GraphQL 請求的突變本質上是這三個項目的組合（即帶有變量和授權標頭的查詢）。 GraphQL Request 確實有一些其他的小功能，包括支持文件上傳，您可以在文檔中了解這些內容

阿波羅客戶端

Apollo Client 由 Apollo 創建，是最流行的 GraphQL 客戶端庫。雖然它顯然可以完成查詢、突變、變量等所有基本功能，但它兼作狀態管理庫。您可以使用 Apollo Client 來管理本地狀態，無論您是否有 GraphQL API 可以連接。但是，真正的強大之處在於能夠緩存您從遠程 API 檢索的狀態並將其與其他本地應用程序狀態相結合。所有這些都是在考慮 React 的情況下構建的，因此，雖然您不必使用 React，但 Apollo Client 很容易與之集成。

老實說，Apollo Client 的內容太多了，無法在這裡詳細介紹，但讓我們回顧一下查詢的一些基礎知識。在 npm 安裝 Apollo 客戶端后，您需要導入三個模塊才能進行基本查詢。

import { gql, ApolloClient, InMemoryCache } from '@apollo/client';

InMemoryCache 允許您配置和控制 Apollo 客戶端的緩存策略。如果您在客戶端上提取數據，這將特別有用。 Apollo Client 將在發現查詢未更改的任何地方使用緩存，這意味著您將能夠比通過網絡重新檢索結果更快地提供響應。在我的示例中，我實際上是從通過 Next.js 的 getStaticProps() 傳遞的 API 加載內容 方法。由於這在構建時傳遞數據，緩存策略並不真正相關，但它仍然是必需的，所以我們將使用默認值。

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com/',
  cache: new InMemoryCache(),
});
const results = await client.query({
  query: gql`
    {
      continents {
        name
        code
      }
    }
  `,
});

傳遞變量非常簡單，只需將變量鍵添加到 query() 稱呼。

const results = await client.query({
  query: gql`
    query getContinent($code: ID!) {
      continent(code: $code) {
        name
        countries {
          name
        }
      }
    }
  `,
  variables: {
    code: code,
  },
});

Apollo Client 允許對您使用 Apollo Link 進行的 HTTP 調用進行大量細粒度控制，包括通過 Context Link 添加授權。但是，為了我們的簡單目的，通過標準請求傳遞憑據。

const client = new ApolloClient({
  uri: 'https://api.github.com/graphql',
  cache: new InMemoryCache(),
  headers: {
    authorization: 'bearer ' + process.env.GITHUB_API_TOKEN,
  },
});

這些基礎知識並不能滿足 Apollo Client 的要求，因為如果您只需要核心查詢功能，則可以使用 GraphQL Request。由於 Apollo Client 是在考慮 React 的情況下構建的，因此它的許多關鍵特性都是針對構建 React 單頁應用程序 (SPA) 的。例如，它帶有許多內置功能和組件，允許您使用 React Hooks 通過 GraphQL API 直接使用新數據為您的前端補充水分。您還可以維護本地狀態，包括從 GraphQL API 返回的數據以及任何其他狀態管理。這已經足夠強大了，以至於我看到一些文章主張放棄 Redux 以支持 Apollo Client。要獲得全部功能，請查看 Apollo 客戶端文檔。

網址

Urql 似乎介於 GraphQL Request 和 Apollo Client 之間，比前者有更多的特性和功能，但比後者少，這使得它比 Apollo Client 更輕量級。例如，它確實包含一個類似於 Apollo Client 的高度可配置的緩存層，但它不包含本地狀態管理。它還集成了內置的 React、Svelte 和 Vue 框架（還有一個用於 Next.js 的包）。如果您正在尋找與 Apollo Client 的逐個功能比較，這裡有一個。

讓我們看看這裡也使用 Urql 做基礎知識。請記住，此示例在構建時提取其所有數據，因此特定於框架的掛鉤並不真正適用。相反，我們將只使用 Urql 進行簡單查詢，從基本查詢開始。首先，我們需要導入正確的模塊。

import { createClient } from 'urql';

接下來，我們創建客戶端和查詢，然後將其傳遞給客戶端的 query() 方法。

const client = createClient({
  url: 'https://countries.trevorblades.com/',
});
const query = `
  {
    continents {
      name
      code
    }
  }
`;
const results = await client.query(query).toPromise();

您會注意到，因為我們使用的是 async/await，所以我們需要將查詢返回的流轉換為 JavaScript 承諾。

傳遞變量幾乎是您所期望的——只需將它們添加到查詢調用中。

const query = `
  query getContinent($code: ID!) {
    continent(code: $code) {
      name
      countries {
        name
      }
    }
  }
`;
const variables = {
  code: code,
};
const results = await client.query(query, variables).toPromise();

要發出授權請求，我們需要使用 fetchOptions 調用createClient()時的參數 並傳入一個包含我們的授權標頭的對象。

const client = createClient({
  url: 'https://api.github.com/graphql',
  fetchOptions: {
    headers: { authorization: 'bearer ' + process.env.GITHUB_API_TOKEN },
  },
});

與 Apollo Client 一樣，Urql 中的可用功能比我們在此介紹的要多得多，包括支持服務器端渲染 (SSR)、高級身份驗證、重試操作和緩存的模塊。要了解更多信息，請查看文檔。

連接到 StepZen

當然，StepZen 就是要創建可以在前端項目中使用的 GraphQL 後端。使用 StepZen 創建 API 後，您需要使用經過身份驗證的請求和您的 StepZen API 密鑰來調用它。以下是一些設置示例。 （請注意，這些假設是 .env 定義 STEPZEN_API_KEY 的文件 )

GraphQL 請求

const graphQLClient = new GraphQLClient('https://account-name.stepzen.net/folder-name/api-name/__graphql', {
headers: {
    authorization: 'Apikey ' + process.env.STEPZEN_API_KEY,
},
});

阿波羅客戶端

const client = new ApolloClient({
  uri: 'https://account-name.stepzen.net/folder-name/api-name/__graphql',
  cache: new InMemoryCache(),
  headers: {
    authorization: 'Apikey ' + process.env.STEPZEN_API_KEY,
  },
});

網址

const client = createClient({
  url: 'https://account-name.stepzen.net/folder-name/api-name/__graphql',
  fetchOptions: {
    headers: { authorization: 'Apikey ' + process.env.STEPZEN_API_KEY },
  },
});

我應該使用哪一個？

您可能想知道，其中哪一個最適合我的項目？答案或許不足為奇：視情況而定。但是，以下是一些選擇指南：

• 如果您主要尋找查詢 GraphQL API 的便捷方法，但不需要緩存、框架集成或狀態管理等功能，那麼 GraphQL Request 提供了一個易於使用且輕量級的解決方案。例如，在我的例子中，我正在查詢一個 Jamstack 應用程序，其中數據在構建時被集成，所以這些特性都與此無關（即使我的示例使用基於 React 的 Next.js 框架） .
• 如果您正在與 React、Vue 或 Svelte 等框架集成，或者您想為客戶端 API 調用添加緩存，但您不一定需要 Apollo Client 提供的完整狀態管理解決方案，那麼請使用Urql 用於更輕量級的內容。
• 如果您需要最全面的解決方案，包括狀態管理，或者您希望與 React 進行最深入的集成，那麼 Apollo Client 是一個不錯的選擇。

當然，除了我在這裡討論的庫之外，還有很多其他庫。查看 GraphQL.org 上的此列表以獲取更完整的列表。