React でのgraphQL リクエスト用に Apollo クライアントをセットアップする

導入

この記事では、ApolloClient ライブラリを使用して、graphQL リクエスト用に React アプリをセットアップする方法を説明します。目標は、アプリの構成方法を示し、リクエストの実行方法の例を提供することです。

リブ

• @apollo/client: 状態管理を有効にし、graphQL リクエストを行うライブラリ
• graphql: GraphQL クエリの解析を可能にするライブラリ

プロジェクトにライブラリを追加するには:

糸追加 @apollo/clientgraphql --dev

構成

以下では、graphQL リクエストを有効にするために ApolloClient を設定する方法を示します。
まず、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 が初期化され、定義されたリンクを通じてエンドポイントを指定し、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 で定義されたクエリを実行し、リクエストの進行中はロードを true として返し、リクエストが失敗した場合はエラーを返し、リクエストが正常に完了した場合はデータを返します。データが返されるまで、画面に「読み込み中...」というメッセージが表示されます。リクエストがエラーで終了した場合は、「リクエストが失敗しました」というメッセージが表示されます。リクエストが成功すると、画面にユーザーの名前と職業（名前と職業）が表示されます。
このようにして、ApolloClient はgraphQL リクエスト用に設定され、使用できるようになります。

結論

その目的は、React アプリがgraphQL 呼び出しを行えるように ApolloClient を構成する方法を示し、コンテキストの定義、このコンテキストの使用法、クエリの実行方法の例を示すことでした。
さらに詳しく知りたい人のために、ApolloClient ドキュメントへのリンクを示します。

以上がReact でのgraphQL リクエスト用に Apollo クライアントをセットアップするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。