React でのgraphQL リクエストのための Apollo クライアントのセットアップ

導入

この記事では、graphQL リクエスト用に React アプリを構成する方法を説明します。このためには APollClient ライブラリが使用されます。目的は、アプリの構成方法とリクエストの作成方法の例を示すことです。

ライブラリ

• @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 がクエリの結果をキャッシュするために使用する 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 で定義された環境から取得することができます。

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 フックは GET_USER で定義されたクエリを実行し、リクエストが完了していない間はloading trueを返し、リクエストが失敗した場合はエラーを返し、リクエストが正常に完了した場合はデータを返します。日付が返されない限り、「読み込み中...」というメッセージが画面に表示されます。リクエストがエラーで終了した場合は、「リクエストが失敗しました」というメッセージが表示されます。リクエストが成功すると、画面にユーザーの名前と職業（名前と職業）が表示されます。
このようにして、ApolloClient はgraphQL リクエスト用に設定され、すぐに使用できるようになります。

結論

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

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