Laravel + Lighthouse + React + TypeScript + GraphQL 構成で雑にGraphQLに入門する #React

はじめに

こちらは、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というものを用意します

coddegen.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の紹介みたいになって申し訳ないのですが、これから死ぬ気で追記していく所存です。