この記事は、Qiita株式会社のカレンダー | Advent Calendar 2023 - Qiitaの7日目の記事です。
はじめに
今回はGraphQLのApolloについて解説していきます。
上記の記事にApollo自体は出てきましたが、Apollo自体が何かを
説明していなかったので今回記事にまとめようと思いました。
Appoloって何？
一言でいうと、GraphQLのフロントエンド・バックエンドのライブラリのことです。
以下公式より図を引用
Web・iOS・Android等のクライアントはGraphQLを叩く際もApolloを叩きますし、
サーバー側の場合もAppoloにデータを集約し、一元的に管理します。
Apollo Client
以下公式より引用
Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.
Apollo Clientは、GraphQLサーバーと通信するためのJavaScriptライブラリのことです。
クエリやミューテーションはこちらで定義を行います。
Apollo Server
以下公式より引用
Apollo Server is an open-source, spec-compliant GraphQL server that's compatible with any GraphQL client, including Apollo Client.
Apollo ServerはクライアントからのGraphQL操作を処理するJSのGraphQLサーバーのことです。
GraphQLのスキーマであったり、リゾルバはここで定義します。
リゾルバとは?
公式より
A resolver is a function that's responsible for populating the data for a single field in your schema.
簡単にいうと、スキーマで定義した型に対して実際の値や操作を定義する関数のことを指します。
以下が基本的な文法になります・
type Query {
stringDog: String! # 毎回dogを返す
stringCat: String! # 毎回catを返す
}
上記の型定義を次のように、定義します。
const resolvers = {
Query: {
stringDog() {
return 'dog';
},
stringCat() {
return 'cat'
},
},
};
補足しておくとtype Queryの部分とQuery: {の通りキー名は合わせる必要があり、
typeのフィールド名(キー名)とresolversのフィールド名(キー名)は合わせておく必要があります。
また、StringとString!の差はnullを許容するかどうかです( ! はnullを許容しない)。
おわりに
今回は、Apolloそのものの基本的な説明をさせて頂きました。
Apolloは説明した通り、クライアントとサーバー両方の機能を携えているため触るためフロントエンド・バックエンドのライブラリと呼ばれています。
また後日、Apolloを用いたサンプルコードを上げようと思います。
今回の記事が皆様の参考になれば幸いです!
参考資料