Laravel5.8 프로젝트에서 GraphQL을 사용해 보았습니다.

개요



Docker와 PHP를 공부하기 위해 만든 Laravel 프로젝트에서 GraphQL을 사용해 보았습니다.
우선 움직일 수 있도록 한 것뿐이므로 자세한 해설 등은 앞으로 쓸 수 있다고 생각하기 때문에
일단 비망적인 것입니다.

하고 싶은 일


  • Lighthouse라는 PHP 패키지를 사용하여 Laravel 5.8에서 GraphQL을 사용할 수 있습니다.
  • React + Apollo Client를 사용하여 프런트 엔드에 표시

  • Lighthouse를 사용하여 GraphQL을 사용할 수 있도록 설정



    Lighthouse는 Laravel 애플리케이션에서 GraphQL 엔드포인트를 제공할 수 있는 PHP 패키지입니다.

    Lighthouse is a PHP package that allows you to serve a GraphQL endpoint from your Laravel application.

    Lighthouse 공식 사이트에서 설치 절차가 공개되어 있으므로 그쪽을 참고로 도입했습니다.
    htps : // / gh 쇼세 php. 이 m/마s테 r/게짱 g-s r d/인 s 탓치온. html
    Lighthouseパッケージのインストール/初期設定
    $ composer require nuwave/lighthouse
    $ php artisan vendor:publish --provider="Nuwave\Lighthouse\Providers\LighthouseServiceProvider" --tag=schema
    
    動作チェックに使用するツールのインストール/初期設定
    $ composer require mll-lab/laravel-graphql-playground
    $ php artisan vendor:publish --provider="MLL\GraphQLPlayground\GraphQLPlaygroundServiceProvider"
    

    http://localhost/graphql-playground 를 방문하면 GraphQL을 사용해 볼 수 있습니다.
    ↓이런 화면이 표시됩니다


    덧붙여서, 상기 순서로 잘못되었을 때는 laravel 프로젝트 바로 아래에 「graphql/schema.graphql」이 만들어져 있는지 확인해 보세요.
    그렇지 않으면 "vendor/nuwave/lighthouse/assets/default-schema.graphql"을 복사하여 해당 파일을 만들면 잘 작동 할 수 있습니다.

    다음은 schema.graphql의 내용입니다.
    User 데이터의 리스트 취득 및 ID 지정에서의 취득용의 설정이 디폴트로 기술되어 있습니다.

    graphql/schema.graphql
    "A datetime string with format `Y-m-d H:i:s`, e.g. `2018-01-01 13:00:00`."
    scalar DateTime @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\DateTime")
    
    "A date string with format `Y-m-d`, e.g. `2011-05-23`."
    scalar Date @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Date")
    
    type Query {
        users: [User!]! @paginate(type: "paginator" model: "App\\User")
        user(id: ID @eq): User @find(model: "App\\User")
    }
    
    type User {
        id: ID!
        name: String!
        email: String!
        created_at: DateTime!
        updated_at: DateTime!
    }
    
    

    시험에 id 2번의 사용자 데이터를 취득해 보겠습니다.

    현재 type Query로 설정된 users, user 쿼리만 있습니다.
    예를 들어 새 user를 만들려고 하면 type Mutation을 추가하고 거기에 user를 만드는 설명을 추가해야 합니다.

    *덧붙여서 CRUD로 말하는 곳의 「(R)ead」의 처리는 Type Query에 그 외 「(C)reate, (W)rite, (D)elete」는 type Mutation이라고 하는 상태에 기술합니다.

    이하에 신규 유저 등록의 기술을 추가해 보았습니다. 여기에서는 name, email, password를 받아 데이터를 등록합니다.

    graphql/schema.graphql
    
    type Query {
    # ・・・
    }
    
    type Mutation {
        createUser(
            name: String
                @rules(apply: ["required"])
            email: String
                @rules(apply: ["required",
                    "email",
                    "unique:users,email"]
                )
            password: String
                @bcrypt
                @rules(apply: ["required"])
        ): User
            @create(model: "App\\User")
    }
    
    type User {
    # ・・・
    }
    

    실제로 추가해 보겠습니다.


    React + Apollo Client를 사용하여 프런트 엔드에 표시



    여기에서는 React와 Apollo Client를 사용하여 데이터를 표시하고 싶습니다.

    덧붙여서 이쪽의 기사를 매우 참고로 했습니다.
    h tps:// 퀵했다. 작은 m/세야/있어 MS/그림 1d8 그림 77352239C4C4897

    필요한 패키지 설치
    $ npm install apollo-boost react-apollo graphql-tag graphql --save
    

    Laravel로 로그인한 후 기본적으로 전환하는 페이지로
    사용자의 이름 목록을 표시합니다.
    도중에 끊어지고 있습니다만, 이런 느낌으로 데이터를 취득해 갑니다.


    home.blade.php
    <h3>Users</h3>
    <div id="users"></div>
    
    <script src="{{ asset('js/app.js') }}" defer></script>
    

    app.js
    require('./bootstrap');
    
    require('./components/Users');
    

    components/Users.js
    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import ApolloClient from 'apollo-boost';
    import gql from 'graphql-tag';
    import { Query } from 'react-apollo';
    import { ApolloProvider } from 'react-apollo';
    
    const client = new ApolloClient({
        uri: 'http://localhost/graphql'
    });
    
    // 先ほどplayground上で試したクエリ (emailは抜きました)
    const query = gql`
        {
            users (
                count: 10
            ) {
                data {
                    id
                    name
                }
            }
        }
    `;
    
    const Users = () => (
        <Query query={query}>
            {({ loading, data }) => {
                // データ取得中はローディングを表示
                if (loading) return <p>loading...</p>;
    
                const users = data.users.data;
    
                return (
                    <ul>
                        {users.map(user => (
                            <li key={user.id}>
                                <span>{user.name}</span>
                            </li>
                        ))}
                    </ul>
                );
            }}
        </Query>
    );
    
    ReactDOM.render(
        <ApolloProvider client={client}>
            <Users />
        </ApolloProvider>,
        document.getElementById('users')
    );
    

    데이터 취득중에는 「loading...」을 표시합니다.


    취득 완료 후, 사용자명의 리스트를 표시할 수 있었습니다.


    우선 이번은 움직이는 곳까지입니다.
    좀 더 씹어서 여러가지 시험해보고 싶습니다.

    좋은 웹페이지 즐겨찾기