はじめに
こちらは、GraphQL Advent Calendar 2018 8日目の記事になります。
いきなりですが、ものすごい雑に解説していきます。
完成品がこちら。
https://github.com/rascate/lara-gql-sample
laravelとnginx入れてdocker化だけしてるので、docker-compose up した後は
よしなにセットアップすれば動きます。
フロント側はしていないので、ローカルでyarnすればとりあえず動きます。
やること
- 雑にGraphQL環境を揃えてとりあえず動かす
- フロントエンドの楽さを伝える
やらないこと
- GraphQLとは?
- Lighthouseの使い方
- リポジトリの解説
Lighthouseのサンプルリポジトリを使う
まず、Laravel環境をセットアップします。
サンプルリポジトリは、 これです
とりあえずクローンして composer install
しとけばOK
完成品には、
https://github.com/mll-lab/laravel-graphql-playground
が入れてあります。
ReactでApolloを使う
https://qiita.com/ehr174/items/85b7cb7e7c93efef8889
こちらを参考に、create-react-appでtypescript環境のreactをセットアップします。
Apollo-boostを入れておきます。
Apollo-boostは、apollo関連ライブラリ全部入りのスゴイやつみたいな感じ(雑
yarn add abollo-boost
SchemaからTypescriptで使えるモデルを生成する
Lighthouseのサンプルリポジトには、以下のようなスキーマがサンプルで入っています
type Task {
title: String!
}
type User {
name: String!
email: String!
jobs: [Job!]! @hasMany
}
type Job {
title: String!
user: User @belongsTo
tasks: [Task!]! @hasMany(type: "paginator")
}
(省略)
このschemaから、自動的にtypescriptで使えるinterfaceを生成できそうだなって思った方、あります。 graphql-code-generator です。
ここのドキュメントに簡単に使い方が書いてありますので、見てください(雑)
まず、codegen.ymlというものを用意します
schema:
- "http://localhost:9022/graphql"
documents:
- "./src/**/*.graphql"
generates:
./src/generated-models.tsx:
plugins:
- "typescript-common"
- "typescript-client"
- "typescript-react-apollo"
そして、Queryを用意します
query JobQuery {
jobs (count:10, page:1) {
data {
title
user {
name
email
}
}
}
}
そして、gpl-gen
してあげれば・・・
こんなものが自動生成されちゃいます
(tslintに引っかかたりするので、対象外にした方が良いです)
後は、こんな感じで、コンポーネントとして使えます。
import * as React from 'react';
import { JobQuery } from "./generated-models";
class JobList extends React.Component {
public render() {
return (
<JobQuery.Component>
{({loading, error, data}) => {
if (loading) { return <div>Loading...</div>; }
if (error) { return <div>Error :(</div>; }
return <div>
<ul>
{data && data.jobs && data.jobs.data.map((job: any, idx: any) => {
return <li key={idx}>
{job.title}
</li>;
})}
</ul>
</div>;
}}
</JobQuery.Component>
)
}
}
export default JobList;
めちゃくちゃ便利ですね!
はい、いかがでしたでしょうか。
ほとんどgraphql-code-generatorの紹介みたいになって申し訳ないのですが、これから死ぬ気で追記していく所存です。