12周年記念パーティ開催! 2024/5/10(金) 19:00

Hygraph(GraphCMS)で学ぶGraphQL

全12回

次世代のAPIと言われるGraphQLと、そんなGraphQLを使ったheadlessCMSである、Hygraph(GraphCMS)について解説していきます。

GraphCMSからHygraphへサービス名の変更:GraphCMSは、2022年7月にHygraphに名称を変更しました。本記事のサービス名や画面キャプチャは記事公開時のものです。

最終回 引数の設定によるさまざまなデータ操作

mutationを使ったクエリのリクエストで、フィールドに渡す引数により、さまざまなコンテンツ操作を行う様子を解説します。単一のコンテンツ操作だけでなく、複数のコンテンツ操作も見てみましょう。

第11回 mutationを使ったデータ操作

mutationを使ったGraphQLクエリで、API経由でGraphCMSのコンテンを操作する方法を解説します。APIの権限をGraphCMS側に設定しておく必要があります。

第10回 取得するコンテンツの分割

フィールドに引数を指定して取得するコンテンツを加工していきます。今回はページを分けてコンテンツを取得する方法を解説します。引数を指定することで複雑なページネーションが可能になります。

第9回 フィルタリングしたページの取得

前回に引き続き、フィールドに引数を指定して取得するコンテンツを加工していきます。今回はコンテンツをフィルタリングして複数の候補に絞り込む方法です。

第8回 コンテンツの絞り込みや画像のリサイズ

フィールドに引数を指定して、取得するコンテンツを加工する方法を解説します。これを利用することで、コンテンツを絞り込んだり、画像を扱うコンテンツの場合にはリサイズされた状態の画像URLを取得することができます。

第7回 データを取得するさまざまなフィールド

GraphQLクエリによるデータの取得には、単一のコンテンツを取得する、複数のコンテンツを取得する、複数のコンテンツを取得した際にページ分けするなど、さまざまなパターンがあります。今回は、その方法を詳しく見てみます。

第6回 コンテンツの公開

GraphCMSでコンテンツを公開するには、コンテンツの公開状態をコントロールするための「ステージ」を理解する必要があります。編集中のコンテンツを誤って公開しないための仕組みです。

第5回 他のコンテンツを参照するフィールド

前回に引き続き、GraphCMSに雛形となるモデルを新しく作成し、フィールドを登録していきます。画像を扱うためのフィールド、選択肢から選べるフィールドなど、GraphCMSに用意されているいろいろな種類のフィールドを使い、コンテンツを登録できるようにしましょう。

第4回 スキーマの登録とフィールド

GraphCMSにコンテンツを入力する前に、まずはスキーマを登録しましょう。あらかじめいろいろな種類のフィールドが用意されているので、どういったコンテンツを入力するかを考えて選んで設定していきます。

第3回 GraphQLクエリの構文

GraphCMSにリクエストする際に必要な、GraphQLクエリの構文について解説します。使用例を元に、構文の基本を見てみましょう。

第2回 Hygraph(旧GraphCMS)とは

headlessCMSである、GraphCMSについて解説していきます。GraphCMSのメリットとデメリットを確認し、リクエストを試してみましょう。

第1回 GraphQLとは

最近メジャーなサービスのAPIとしても採用されることが増えているGraphQLと、そんなGraphQLを使ったheadless CMSである、GraphCMSについて解説していきます。まずは概要を大きく捉えてみましょう。