GraphQL の学習メモ - 1

riki
·
公開:2024/3/11

GraphQL の学習はじめ

GraphQL なんもわからんから、ちょっとわかるまでを最速で到達するための学習を始める。

具体的には Udemy の講座を利用して GraphQL で可能なことと、具体的なコードを学んで最低限書くことができる状態を作る。

教材

【GraphQL入門】RESTに代わるモダンAPIのGraphQLでニュースアプリAPIを構築しながら基礎を学ぶ入門講座

Apollo でできること

Apollo Server

GraphQL Requests を受け取り、Apollo Server を通してあらゆるソースからデータを取得できる

参考: https://www.apollographql.com/docs/apollo-server/

各種定義について

  • typedefs

    • GraphQL のスキーマ定義

  • resolver

    • typedefs に対して実体のデータを入れる

REST の CRUD に対応する概念

  • read => Query

  • create => Mutation

  • update => Mutation

  • delete => Mutation

Playground による GraphQL へのリクエスト

Apollo server を起動 (listen) して、localhost を立ち上げる (port はコードで指定する)

Query (データ取得) の記法

Query のためのスキーマ定義に対して

Playground 上で指定する型の名称は一致させる必要がある

Mutation の記法

Mutation (データの作成・更新・削除) のスキーマ定義に対して

Playground 上で指定する型の名称は一致させる必要がある。また、レスポンスも同時に取得可能。

Apollo Client

  • アプリケーションデータのフェッチ、キャッシュ、変更を行う

  • React に対応していて hooks も利用できる

  • 各プラットフォーム(web, ios, android)は GraphQL Client を同一のインターフェースとして Server と接続可能

  • 各プラットフォームは Server 側でなんのサービスを利用しているかを意識する必要はない

まとめ

  • Apollo とGraphQL は相性が良い

    • Apollo って何ができる?

      • GraphQL サーバーを簡単に構築できる

  • GraphQL とは?

    • API のクエリ言語

  • GraphQL と REST API の違い?

    • GraphQL: http post でリクエストする

    • エンドポイントを分けることなく GraphQL に集約して Query で任意のデータを取得する

      • e.g. /graphql みたいなエンドポイントに対して query を http post でレスポンスを取得する

    • 必要なデータだけを query に記載すれば良い。REST のように固定のフィールドが決まっているわけではない

  • 型指定でリクエスト可能

  • Apollo Server 側で指定する typeDefs, resolver といった基本的な概念とそれらの記法を学んだ

    • おそらくこの二つの概念が抑えられておけば、とりあえず簡単な API の実装はできそう

  • Apollo Server を起動すると Playground の画面上で GraphQL リクエストを試すことが可能

  • 次回はセクション5に進んで、Prisma を利用したデータの永続化と DB 接続のコードの書き方を学ぶ