总结

我创建了一个Laravel项目来学习Docker和PHP，并尝试使用GraphQL。我只是让它能运行起来，所以详细的解释会在将来写出来。目前只是一个备忘录性质的东西。

想做的事情

• LighthouseというPHPパッケージを用いてLaravel5.8上でGraphQLを使えるようにする

React＋Apollo Clientを用いてフロントエンドに表示

使用Lighthouse使GraphQL可用

Lighthouse是一个PHP包，它可以使Laravel应用程序提供GraphQL端点。

Lighthouse是一个PHP包，它允许您从您的Laravel应用程序中提供一个GraphQL端点。

我按照Lighthouse公式网站上公布的安装步骤进行了引入。
https://lighthouse-php.com/master/getting-started/installation.html#install-via-composer

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"

顺便提一下，如果上述步骤没有成功，可以在laravel项目的根目录下检查是否创建了「graphql/schema.graphql」文件。
如果没有，则可以尝试复制「vendor/nuwave/lighthouse/assets/default-schema.graphql」来创建相关文件，也许这样会使其正常运行。

以下是schema.graphql的内容。
默认情况下，已经定义了用于获取用户数据列表和根据ID获取数据的设置。

"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!
}

顺便说一句，在CRUD中，“(R)ead”操作相当于Type Query，而其他的“(C)reate、(W)rite、(D)elete”操作则相应地在type Mutation中进行描述。

我已经添加了新用户注册的描述。在这里，我们将接收name、email和password，并将数据进行注册。

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来显示数据。

顺便提一下，这篇文章对我非常有帮助。
参考链接：https://qiita.com/seya/items/e1d8e77352239c4c4897

需要安装必要的软件包。

$ npm install apollo-boost react-apollo graphql-tag graphql --save

<h3>Users</h3>
<div id="users"></div>

<script src="{{ asset('js/app.js') }}" defer></script>

require('./bootstrap');

require('./components/Users');

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')
);

暂时就先到这里为止吧，我想再深入探索一些，试试不同的方法。