React 中 graphQL 請求的 Apollo 用戶端設置

介紹

本文將展示如何為 graphQL 請求配置 React 應用程序，為此將使用 APollClient 函式庫。這個想法是展示如何配置應用程式以及如何發出請求的範例。

庫

• @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 使用該實例來緩存查詢結果。
在 httpLink 中，傳遞 graphQL api 的 uri，並定義請求所需的標頭，在本例中以使用 Bearer 令牌為例。
最後，定義返回和導出以允許在應用程式內使用。

考慮到這是一個登入後將令牌保存在 localStorage 中的應用程序，並且您通常希望允許整個應用程式的 graphQL 請求，因此使用上面文件中定義的 ApolloProvider：

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

const token = localStorage.getItem('@tokenId')
// endpoint da sua api graphQL
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 定義的 env。

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

import { gql } from '@apollo/client'

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

export default GET_USER

GET_USER 對應於 React 應用如何呼叫查詢，以及使用者在 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 hook 將執行 GET_USER 中定義的查詢，當請求未完成時傳回 load true，如果請求失敗則傳回錯誤，當請求成功完成時傳回資料。只要日期尚未返回，螢幕上就會出現「正在載入...」訊息。如果請求以錯誤結束，則會顯示訊息「請求失敗」。如果請求成功完成，使用者的姓名和職業（姓名和職業）將會顯示在螢幕上。
這樣，ApolloClient 就已針對 graphQL 請求進行了設定並可供使用。

結論

這個想法是展示如何配置 APolloClient 以使 React 應用程式能夠進行 graphQL 調用，顯示上下文的定義、此上下文的使用以及如何執行查詢的範例。
對於想要深入研究的人，請點擊 ApolloClient 文件的連結。

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