在 React 中為 graphQL 請求設定 Apollo 用戶端

介紹

本文將示範如何使用 ApolloClient 函式庫為 graphQL 請求設定 React 應用程式。目標是展示如何配置應用程式並提供如何發出請求的範例。

庫

• @apollo/client：啟用狀態管理並發出 graphQL 請求的庫
• graphql：允許解析 GraphQL 查詢的函式庫

將庫加入項目：

yarn add @apollo/client graphql --dev

配置

下面，我將展示如何設定 ApolloClient 來啟用 graphQL 請求。
首先，將建立一個 ApolloClient 上下文，以便其子層級包含的所有內容都可以發出 graphQL 請求：

import {
  ApolloClient,
  ApolloProvider,
  HttpLink,
  InMemoryCache
} from '@apollo/client'

function ExampleApolloProvider({ children, token, uri }) {
  const httpLink = new HttpLink({
    uri: uri,
    headers: {
      authorization: `Bearer ${token}`,
    },
  })

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  })

  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

export { ExampleApolloProvider as ApolloProvider }

在 const 用戶端中，ApolloClient 被初始化，透過定義的連結指定端點，並使用 InMemoryCache 實例指定緩存，ApolloClient 使用 InMemoryCache 來快取查詢結果。
在 httpLink 中，設定了 graphQL api 的 uri，以及請求所需的標頭。在此範例中，使用了 Bearer 令牌。
最後，定義返回和導出以允許其在應用程式內使用。

考慮到這是一個登入後將令牌保存在 localStorage 中的應用程序，並且目標是在整個應用程式中啟用 graphQL 請求，因此使用上一個檔案中定義的 ApolloProvider：

import { ApolloProvider } from './contexts/ApolloContext'
import AppContent from './components/AppContent'

const token = localStorage.getItem('@tokenId')
// endpoint of your graphQL api
const graphqlURI = 'https://www.example.com'

const App = () => {
  return (
    <ApolloProvider token={token} uri={graphqlURI}>
      <AppContent />
    </ApolloProvider>
  )
}

在此範例中，從 localStorage 檢索令牌（在本例中，就好像它是使用鍵 @tokenId 保存的），並且 uri 在同一文件中定義，然後傳遞給 ApolloProvider。 AppContent 作為 ApolloProvider 的子級傳遞，這表示其中包含的所有內容（整個應用程式）將能夠發出 graphQL 請求。
實際上，當測試和生產環境不同時，graphqlURI 可以來自環境變量，並相應地定義每個環境的 uri。

從 api 公開的名為 user 的查詢開始，該查詢傳回使用者的姓名和職業，將使用要呼叫的查詢定義一個檔案：

import { gql } from '@apollo/client'

const GET_USER = gql`
  query GetUser {
    user {
      name
      occupation
    }
  }
`

export default GET_USER

GET_USER 對應於 React 應用程式中如何呼叫查詢，user 是要從 api 使用的查詢的名稱。

在定義AppContent的檔案中，將呼叫GET_USER查詢並使用其傳回：

import {
  ApolloClient,
  ApolloProvider,
  HttpLink,
  InMemoryCache
} from '@apollo/client'

function ExampleApolloProvider({ children, token, uri }) {
  const httpLink = new HttpLink({
    uri: uri,
    headers: {
      authorization: `Bearer ${token}`,
    },
  })

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  })

  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

export { ExampleApolloProvider as ApolloProvider }

useQuery 鉤子將執行 GET_USER 中定義的查詢，在請求仍在進行時傳回 load true，如果請求失敗則傳回錯誤，並在請求成功完成時傳回資料。在資料返回之前，螢幕上會顯示「正在載入...」訊息。如果請求以錯誤結束，則會顯示訊息「請求失敗」。如果請求成功，螢幕上會顯示使用者的姓名和職業（name and jobs）。
這樣，ApolloClient 就已針對 graphQL 請求進行了設定並可供使用。

結論

這個想法是演示如何配置 ApolloClient 以允許 React 應用程式進行 graphQL 調用，顯示上下文的定義、此上下文的用法以及如何執行查詢的範例。
這是 ApolloClient 文件的鏈接，供想要深入了解的人使用。

以上是在 React 中為 graphQL 請求設定 Apollo 用戶端的詳細內容。更多資訊請關注PHP中文網其他相關文章！