GraphCMS事始め

# GraphCMS事始め
この記事は[GraphQL Advent Calendar](https://qiita.com/advent-calendar/2018/graphql)の15日目の記事です。

GraphQLでレスポンス受けたいけど、GraphQLのAPIサーバーを作るのはめんどい。そんなあなた（私）にオススメなのが、GraphQLでレスポンスを返してくれるHeadlessCMS、その名もGraphCMSです！！
この記事ではGraphCMSの初期設定から、オススメポイント（サポートの神対応）までお伝えします。

## GraphCMSアカウント作成
[GraphCMSホームページ](https://graphcms.com/)からSignUpでアカウントを作成します。
github、facebook等でのsignupも出来ます。

![スクリーンショット 2018-12-15 9.43.10.png](https://qiita-image-store.s3.amazonaws.com/0/114396/c12fcad7-6cb4-1f13-9d11-5201ed98848e.png)


## プロジェクトの作成
次にプロジェクトを作成します。
今回は、sampleというプロジェクトを作成しました。
<img width="1437" alt="スクリーンショット 2018-09-16 15.37.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/114396/30bf0c4e-cfac-4489-ece3-383bc9e0c7a5.png">

プランの選択がありますが、無料で大丈夫です。
<img width="1433" alt="スクリーンショット 2018-09-16 15.37.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/114396/e48fe03c-11f4-762a-342a-66b7b80d7854.png">

##  スキーマの作成

サイドメニューのschemeよりModelを作成します。
DBのようなものです。これがAPIのデータにひも付きます。
Model内にwordpressのカスタム投稿タイプのように、inputフィールドを作成することができます。

<img width="1421" alt="スクリーンショット 2018-09-16 15.39.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/114396/a0311fc1-b753-9a32-123f-3596278a2b01.png">

右上のCreateModelより作成できます。
今回は以下内容で作成しました。

```
# モデルの構成
displayName： post
api key： Post
# フィールドの構成
title: single line text
description: multi type text
content: mark down
thumbnail: asset picker
``` 

<img width="1416" alt="スクリーンショット 2018-09-16 15.40.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/114396/865d84ef-ce53-1a10-75c2-daed549f8b06.png">

##  データの追加

サイドメニューのcontent > posts を選択し、右上のcreate Postよりデータの追加が行えます。
なにか適当に追加しておきましょう。
こちらのデータを後から説明するvue-apolloで取得します。

<img width="1425" alt="スクリーンショット 2018-09-16 20.47.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/114396/fe372401-857d-f6c8-7d93-d029f2f6aca5.png">

## GraphQLを試してみる
コンテンツを入力したら、早速GraphQLを試してみましょう。
サイドメニューのAPI Exploereより、GraphQLのリクエストが試せます。
入力のオートコンプリートも効きますし、右側のDocsという小さいボタンをクリックすると、
作成したModelに合わせた、GraphQLのquery情報が確認できます。

![スクリーンショット 2018-09-17 23.35.30.png](https://qiita-image-store.s3.amazonaws.com/0/114396/2125fbb8-a5e8-eb34-49c7-bee169bd7c35.png)

## API情報の確認
データの取得に使用するエンドポイントは、サイドメニューのsettingsより確認できます。
その他、settignsではエンドポイントの公開設定等行えます。
初期はreadOnlyです。

<img width="1406" alt="スクリーンショット 2018-09-16 15.41.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/114396/879f2a3a-9fc7-8fca-86ce-be6182d69872.png">

# ここがすごいよGraphCMS
## GraphQLでレスポンスが返る
ハイ。そのままです。ただ、そこが何より良いですね。今の所、GraphQLのHeadlessCMSはGraphCMSしかないです。しかも、スキーマも使いやすいよう設計してくれていると思います。

## UI・UXが素敵
完全に個人の趣味なのかもしれないですが、管理画面はマテリアルデザインが徹底されて、とても使いやすい管理画面だと思います。
レスポンスに関してもSPAなので、某CMSとは運伝の差。使い心地抜群です。

![Dec-15-2018 12-27-08.gif](https://qiita-image-store.s3.amazonaws.com/0/114396/2758fcd9-7721-35c7-40db-c02547d334ee.gif)


## カスタマーサポートが神対応
使用しててちょっと詰まった。ドキュメント書いてない。そんな時は気軽にサポートにchatしましょう。
私も、ちょっとした質問をGoogle翻訳直打ちでしたのですが、翌日にはめちゃくちゃ丁寧に、まさにコレという返答が来ました。

### 👨‍🚒（私）
> I use this IntelliJ plugin.
> https://github.com/jimkyndemeyer/js-graphql-intellij-plugin
> How can I get schema.json at my project

> IntelliJのこのプラグインを使うために、schema.jsonを欲しいのだけどどうやったら取れるの？？ 

### 😎（カスタマーサポート）
> Hi, from the docs it looks to me like you should be able to give the plugin simply your API endpoint and it will use the introspection query to grab your data. There's not a downloadable JSON schema file proper, but you could theoretically build one by doing an introspection query on your own and then manually parsing it to the JSON format you need. If you are "online" and don't need offline support, giving it the project API is going to be the easiest approach.
> 
> "An editor notification bar should prompt you to "Create a graphql.config.json". Accept and edit this config file to point the plugin at your local schema.json or your endpoint for introspection. The plugin uses the schema to provide completion and error highlighting."


> プラグインのドキュメントを見たら、schema.jsonがなくても簡単に設定できるみたいだよ。こんな説明があるから、やってみると良いかもね。（超超意訳）

この通り、ただscheme.jsonの取得方法を聞いただけなのに、わざわざ提示したライブラリのREADMEまで読んでくれて、こんな風にした出来るよ。方法まで返してくれました。カスタマーサポートの鏡！！感動しました。
（自分がREADMEもっと読んどけという話はおいといて、、😅）


# おわりに
以上GraphCMS事始めでした。
これで、もっと日本のGraphCMSのユーザーが増え、サービスが長く存続することを願います。
また、Nextステップとして自薦ですが、GraphCMSでAPIを作り、フロントはvueで構築したい！という方にはこちらの記事（[vue.js, Apollo, graphQLで名簿アプリを作成する（CRUD機能の実装サンプル） - Qiita](https://qiita.com/ryo2132/items/429234c9de1b546b3406)）をどうぞ。