18
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

GraphQLAdvent Calendar 2018

Day 8

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

Last updated at Posted at 2018-12-07

はじめに

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

18
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?