Apollo

アポロ

Apollo を分かりやすく

Apolloとは何かというと、GraphQLクライアントの一つです。ちょっと待って、「GraphQLって何？」って思うかもしれませんね。GraphQLはFacebookが開発したデータ取得のためのクエリ言語で、RESTful APIとは異なるアプローチを提供します。

難しいですよね？例え話で説明してみます。

あなたがレストランに行って、メニューから料理を頼むとしましょう。RESTful APIの世界では、レストランはセットメニューしか提供していません。ビーフステーキのセットを頼むと、それに付いてくるサラダ、スープ、デザートも一緒に来ます。でも、あなたがサラダが嫌いだとしたらどうでしょう？残念ながら、それは選べません。それがセットなんですから。

ここでGraphQLとApolloが登場します。GraphQLのレストランでは、あなたが何を食べたいか具体的に指定できます。ビーフステーキだけ、それとデザート。サラダとスープはいらない、というように。これがGraphQLの力です。あなたが必要とするデータだけを取得できるんです。これは非常に効率的で、無駄なデータ転送を減らすわけです。

では、Apolloはどこに位置するのかというと、あなたとレストランの間に立つウェイターのようなものです。あなたが何を食べたいかをウェイターに伝えると、ウェイターがそれをキッチンスタッフに伝え、料理ができたらあなたのテーブルに運んできます。そして、何か問題があればウェイターが対応します。Apolloはそのような役割を果たします。要は、あなたがどのようなデータを必要としているかをGraphQLサーバーに伝え、結果を取得してくれるんですね。

Next.jsやJamstackでApolloを使用すると、非常に柔軟なデータ取得と効率的なパフォーマンスを得ることができます。あなたが作りたい料理（アプリケーション）に必要な材料（データ）だけを簡単に取得できるんです。それって素晴らしいと思いませんか？

少しまとめます。Apollo は、GraphQL を扱うためのクライアントライブラリです。GraphQL は、Facebook 社が提供するクエリ言語で、Web API の設計手法の 1 つです。GraphQL では、必要なデータだけを取得することができ、不要なデータを取得することがありません。Apollo を使うことにより、GraphQL のクエリとレスポンスを扱うことができます。

Apollo と React

Apollo は、React をはじめとした JavaScript フレームワークと連携することができます。React と Apollo を連携することにより、GraphQL からデータを取得し、React のコンポーネントに渡すことができます。

以下は、Next.js と TypeScript を使った Apollo の例です。

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
import { GetStaticProps } from 'next'
import { useState } from 'react'

type Post = {
  id: string,
  title: string,
  body: string,
}

type Props = {
  posts: Post[],
}

const client = new ApolloClient({
  uri: '<https://jsonplaceholder.typicode.com/graphql>',
  cache: new InMemoryCache(),
})

export const getStaticProps: GetStaticProps<Props> = async () => {
  const { data } = await client.query({
    query: gql`
      query {
        posts {
          id
          title
          body
        }
      }
    `,
  })

  return {
    props: {
      posts: data.posts,
    },
  }
}

const Posts = ({ posts }: Props) => {
  const [selectedPostId, setSelectedPostId] = useState(posts[0].id)

  const selectedPost = posts.find((post) => post.id === selectedPostId)

  return (
    <div>
      <select value={selectedPostId} onChange={(e) => setSelectedPostId(e.target.value)}>
        {posts.map((post) => (
          <option key={post.id} value={post.id}>
            {post.title}
          </option>
        ))}
      </select>
      <h1>{selectedPost.title}</h1>
      <p>{selectedPost.body}</p>
    </div>
  )
}

export default Posts

上記のコードは、JSONPlaceholder というサービスから GraphQL を使ってデータを取得し、React コンポーネントに渡しています。特に、getStaticProps という関数を使って、ビルド時にデータを取得しています。このようにすることで、サイトの速度を向上させることができます。

Apollo は、GraphQL を扱うためのクライアントライブラリであり、React と連携することができます。GraphQL を使うことにより、必要なデータだけを取得することができ、不要なデータを取得することがありません。また、Next.js を使ってアプリケーションをビルドする場合には、getStaticProps を使って、ビルド時にデータを取得することができます。

Next.js を学ぶ一覧へ