GraphCMSセットアップ

GraphCMSはGraphQLのバックエンドサービスです。 GraphQLのスキーマを詳しく知らなくても、GUIで組み立てることができるため、練習のために導入してみましょう。

今回は簡単なブログを想定したアプリを題材にします。

アカウントの作成

を開いてSign Upからアカウントを作成してください。

新しいプロジェクトを作成しましょう。プロジェクト名は何でも構いません。

MODELSからADD CONTENTボタンを押して、新規にモデルを作成してください。

次に作成したArticleにFieldを追加しましょう。

ブログ記事のタイトルです。

その他はデフォルトのままで。

ブログ記事の本文です。

ブログ記事の日時です。

ブログ記事のカバー画像です。

CoverはAssetとConnectしておく必要がありますので、Connectを押して有効にしてください。

また、Asset全体の読み込み権限を付与するためにPermissionsのRを有効にしてください。

SETTINGSを開くとEXPORT DATAというところに DOWNLOAD SCHEMAというボタンがあります。押してファイルをダウンロードしましょう。

開くとGraphQLのスキーマ宣言があります。自分で作成したArticleだけに注目して見てください。想定通りにできたいたでしょうか。

@modelなどの@がついた宣言は今は気にしないものとしましょう。

アプリとしての動作を確認するために事前にコンテンツを作成しておきましょう。

CONTENT / Articleを開いて、"+"ボタンを押して記事を追加しましょう。 3記事くらい追加しておくと良いでしょう。また、カバー写真も追加してみてください。

GraphCMSにもGraphiQLが組み込まれています。 API EXPLORERを開いて、クエリを組み立ててみましょう。

はじめは補完機能を使いながらゼロから組み立ててみるのが良いでしょう。

慣れてきたら最後に下記のクエリが動くかを確認してください。

{
  allArticles(orderBy: date_ASC) {
    id
    title
    date
    content
    cover {
      url
    }
  }
}