【GraphQL入門】GraphCMS + React（react-apollo）
どうも、こんにちは、白石です。
Reactを使い始めて、４ヶ月が経ちました。
直近では、 react-apollo 周りの実装をさせていただく機会も増えました。
それらに伴い、GraphQL周りの理解も深めたいと考えている次第、同じ境遇の方の助けになれば幸いです。
GraphCMS
GraphCMSは、Introduction1 にもあるように、
GraphQLの仕様、API設計をUIベースかつ数分で作成できるサービスです。
今回はこちらを使用して、GraphQLをキャッチアップしてみようと思います。
サービスの登録は、GitHub認証で行うことが出来ます。
Beginners Guide with React
Beginners Guide with React2 の章を進めると、予め用意されているAPIからデータを取得し、画面に表示することが出来ます。こちらを一通り終えた前提で話を進めますので、ぜひチャレンジしてみて下さい！
とりあえず、すぐ触ってみたいんだ！ という方は、下記リポジトリからcloneをどうぞ。
完成形のファイルはコチラにあります。
自分のプロジェクトを作成し、データを表示してみよう
上記で作成したファイルを元にコードを編集し、GraphCMS上で自作したデータを取得、表示してみます。
[1]
GraphCMS上でプロジェクトを作成すると、下記の画面が表示されます。
最初に、こちらのエンドポイントを src/index.js に設定しておいてください。
import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import * as serviceWorker from "./serviceWorker"
import { ApolloClient } from "apollo-client"
import { HttpLink } from "apollo-link-http"
import { InMemoryCache } from "apollo-cache-inmemory"
import { ApolloProvider } from "react-apollo"
const GRAPHCMS_API = "https://api-apeast.graphcms.com/v1/xxxxxxxxxxxx/master" // ココにエンドポイントを貼り付ける
const client = new ApolloClient({
link: new HttpLink({ uri: GRAPHCMS_API }),
cache: new InMemoryCache()
});
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root")
)
serviceWorker.unregister()
APIのパーミッションは、READに設定しておきます。
[2]
サイドナビの Schema -> CreateModel から、任意の Schema を作成します。
[3]
サイドナビの Content -> 作成した Schema名 からフィールドに値を設定します。
※ ダミーデータの参考に、コチラを使用させていただきました。
[4]
先程、土台で作成した react-apollo-blog の Home.js を改変し、データを表示させてみましょう。
import React from 'react'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'
const Home = ({ data: { loading, error, champs, networkStatus } }) => {
if (error) return <h1>Error fetching posts!</h1>
if (champs) {
return (
<section>
<ul className="Home-ul">
{champs.map(champ => (
<li className="Home-li" key={`c-${champ.id}`}>
<h3>{champ.name}</h3>
<p>{champ.ability}</p>
<p>
{champ.createdAt}/{champ.updatedAt}
</p>
</li>
))}
</ul>
</section>
)
}
return <h2>Loading posts...</h2>
}
export const getChamps = gql` // クエリを作成
query {
champs {
createdAt
updatedAt
status
id
name
ability
}
}
`
export default graphql(getChamps, {
options: {},
props: ({ data }) => ({
data,
}),
})(Home)
[5]
取得した情報が表示されていればOKです!!
所感
GraphQLは、APIへ問い合わせるクエリ言語です。今回、GraphCMSを通じて触れてみましたが、queryの書き方も直感的で表示を含めた疎通確認も躓くことなく書けました。また、各スキーマの型がAPIのデータ構造を表しているため、それ自体が仕様の役割を示しています。大変使い易く、画期的だと感じました。今後とも、設計やRESTとの違い、強み弱みなど理解を深めていきたいところです。合わせて、 react-apollo の仕様も体系的に理解していければと思います。
