Laravel5.8 프로젝트에서 GraphQL을 사용해 보았습니다.
18022 단어 LighthouseGraphQLReact아폴로laravel5.8
개요
Docker와 PHP를 공부하기 위해 만든 Laravel 프로젝트에서 GraphQL을 사용해 보았습니다.
우선 움직일 수 있도록 한 것뿐이므로 자세한 해설 등은 앞으로 쓸 수 있다고 생각하기 때문에
일단 비망적인 것입니다.
하고 싶은 일
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.jsrequire('./bootstrap');
require('./components/Users');
components/Users.jsimport 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...」을 표시합니다.
취득 완료 후, 사용자명의 리스트를 표시할 수 있었습니다.
우선 이번은 움직이는 곳까지입니다.
좀 더 씹어서 여러가지 시험해보고 싶습니다.
Reference
이 문제에 관하여(Laravel5.8 프로젝트에서 GraphQL을 사용해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/enuswi/items/15ae014f836aa4f1ce87
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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"
"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!
}
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를 사용하여 데이터를 표시하고 싶습니다.
덧붙여서 이쪽의 기사를 매우 참고로 했습니다.
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...」을 표시합니다.
취득 완료 후, 사용자명의 리스트를 표시할 수 있었습니다.
우선 이번은 움직이는 곳까지입니다.
좀 더 씹어서 여러가지 시험해보고 싶습니다.
Reference
이 문제에 관하여(Laravel5.8 프로젝트에서 GraphQL을 사용해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/enuswi/items/15ae014f836aa4f1ce87텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)