🍇

Apollo Clientに入門する

2024/08/11に公開

GraphQL

React

TypeScript

tech

What is Apollo Client?

official

Apollo ClientはJavaScriptのための包括的な状態管理ライブラリです。ローカルとリモートの両方のデータをGraphQLで管理できます。アプリケーションデータのフェッチ、キャッシュ、変更に使用し、UIを自動的に更新します。

Apollo Clientは、経済的で、予測可能で、現代の開発プラクティスに沿った宣言的な方法でコードを構成するのに役立ちます。コアの@apollo/clientライブラリは、Reactとの組み込み統合を提供し、より大規模なApolloコミュニティは、以下を維持します。

コア機能

Apollo Clientのコア機能には、以下のようなものがあります：

宣言型データフェッチ：手動でロード状態を追跡することなく、クエリを書いてデータを受信します。
正規化されたリクエストとレスポンスのキャッシュ：キャッシュされたデータを使用してクエリにほぼ即座に応答することで、パフォーマンスを向上させます。
優れた開発者エクスペリエンス： TypeScript、Chrome / Firefox devtools、VS Codeのための便利なツールをお楽しみください。
最新のReact用に設計されています：フックやサスペンスなど、最新のReact機能を活用できます。
段階的に導入可能： Apollo ClientをあらゆるJavaScriptアプリにドロップし、機能ごとに組み込むことができます。
汎用的な互換性：どのようなビルドセットアップでも、どのようなGraphQL APIでも使用できます。
コミュニティ主導： GraphQLコミュニティの何千人もの開発者と知識を共有できます。

Apollo Client を選ぶ理由

データ管理に Apollo Client を選択する理由は何ですか?

Apollo Client は、GraphQLを使用してリモートデータとローカルデータの管理を簡素化する状態管理ライブラリです。Apollo Client のインテリジェントなキャッシュと宣言的なデータ取得アプローチにより、記述するコードを減らしながら反復処理を高速化できます。さらに、カスタム機能が必要な場合は、Apollo Client 上に拡張機能を構築して、理想のクライアントを作成できます。

解説ページ

ここからは、長い説明が続きます💦
リモートからデータを取得して、キャッシュしてくれるものだということはわかった。

ViteでApollo Clientを使う

Viteを使って、React + TypeScriptで環境構築をしてください。

npm create vite@latest

依存関係をインストールする。

npm install @apollo/client graphql

main.tsxを編集して、ApolloClient, InMemoryCache, ApolloProvider, gqlの設定を追加する。ApolloProviderで、　Appコンポーネントをラップすると、アプリケーション全体で、GraphQLが使えるようになります。

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://flyby-router-demo.herokuapp.com/',
  cache: new InMemoryCache(),
});

// const client = ...

client
  .query({
    query: gql`
      query GetLocations {
        locations {
          id
          name
          description
          photo
        }
      }
    `,
  })
  .then((result) => console.log(result));

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </StrictMode>,
)

App.tsxにドキュメント通りに、コードを追加していくのですが、データ型の定義がないのでエラーが出ます。console.logで、データ型を見てみると、プロパティは全てString型だったので、TypeかInterfactで、データ型を定義してください。

Locationという名前にしておきますか。

type Location = {
  id: string;
  name: string;
  description: string;
  photo: string;
};

サンプルのURLから、APIのデータをQueryを使って、data fetchします。REST APIで、いうところのHTTP GETですね。

// Import everything needed to use the `useQuery` hook
import { useQuery, gql } from '@apollo/client';

const GET_LOCATIONS = gql`
  query GetLocations {
    locations {
      id
      name
      description
      photo
    }
  }
`;

type Location = {
  id: string;
  name: string;
  description: string;
  photo: string;
};

function DisplayLocations() {
  const { loading, error, data } = useQuery(GET_LOCATIONS);

  if (loading) return <p>👻Loading...</p>;
  if (error) return <p>🦠Error : {error.message}</p>;

  // return data.locations.map(({ id, name, description, photo }) => (
  return data.locations.map(({ id, name, description, photo }: Location) => (
    <div key={id}>
      <h3>{name}</h3>
      <img width="400" height="250" alt="location-reference" src={`${photo}`} />
      <br />
      <b>About this location:</b>
      <p>{description}</p>
      <br />
    </div>
  ));
}

export default function App() {
  return (
    <div>
      <h2>My first Apollo app 🚀</h2>
      <DisplayLocations />
    </div>
  );
}

データの取得に成功するとこのように、ブラウザにデータが表示されると思われます。

感想

TypeScriptを使うと、データ型の指定も必要だったので、ハマりました💦
GraphQLは、REST APIと違うのは、複数のエンドポイントにアクセスしなくても一つのエンドポイントから、アクセスできるというメリットがあります。自動生成のパッケージの方を使ってみたかったのですが、うまくいかなかったので、一旦こちらで試してみました。

こちらが完成品

What is Apollo Client?

コア機能

Apollo Client を選ぶ理由

ViteでApollo Clientを使う

感想

Discussion