GraphQLクイックスタートチュートリアル

要約： GraphQLの魔法を体験してください！

オリジナル：GraphQLエントリーコメント
著者：MudOnTire

Fundebugは、元の作者に属し、転載を承認しました。

GraphQLプロフィール

定義

API呼び出しのためのデータクエリ言語

核となるアイデア

従来の一般的なAPIは、バックエンドは完全なオブジェクトを組み立てている取得するために呼び出し、フロントエンドはフィールドのみ、クエリの一部を必要とし、データ伝送のほとんどが無駄にされて動作する可能性があります。新しいデータクエリを提供graphQL、あなたはAPIがより柔軟で効率的かつ低コストの呼び出しを行うために必要なデータのみを取得することができます。

機能

あなたはどのようなデータを取得するために必要なもの
リレーショナルデータのクエリのサポート
ノー定義APIさまざまなルーティング、データドライバ完全に
管理APIのバージョンない、継続的な進化のバージョンなし
これは、最も人気のある開発言語やプラットフォームをサポートしています
強力な開発ツール、

使用

さんがで作ろうSpaceX社の直感的ニュースサイトからの基本的な使用graphQLにすべてのデータを学習する公式API利用できます。

GraphQLサーバー

ノード+ Expressを使用してサーバー。新しいノード項目は、以下の依存関係をインストールします。

$ npm i graphql express-graphql express axios

ファイルのエントリを作成server.js速達サービスを作成し、。このgraphQLに対処するための要求ハンドラによって、すべての要求は、我々は唯一のルートを設定する必要がありgraphQLを使用します。

const express = require("express");
const graphqlHTTP = require("express-graphql");
const schema = require("./schema");

const app = express();

app.use(
    "/graphql",
    graphqlHTTP({
        schema,
        graphiql: true
    })
);

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

graphqlHTTP graphql照会要求を処理するためのgrapql HTTPサービスである、それはスキーマがあるパラメータオプション、受信GraphQLSchema真graphQLに設定する例、我々が定義しようとしているが、graphiqlは、ブラウザで直接デバッグすることができます。もっと急行-graphqlの使用を参照してくださいGithubの急行-graphql。

スキーマ

次の我々は、データモデルの構造、フィールドのタイプとの間の関係を定義するスキーマ、「モデル」を意味スキーマを定義し、モデルはgraphQLのコアです。

新しいschema.jsファイルには、最初の二つのデータモデルを定義しますLaunchType（トランスミッター）とRocketType（ロケット）。フィールドのデータ型を使用する必要があることに注意してくださいGraphQL定義され、それが基本的なデータ型のjsファイルで使用することはできません。

const {
    GraphQLObjectType,
    GraphQLInt,
    GraphQLString,
    GraphQLBoolean,
    GraphQLList,
    GraphQLSchema
} = require("graphql");

const LaunchType = new GraphQLObjectType({
    name: "Launch",
    fields: () => ({
        flight_number: { type: GraphQLInt },
        mission_name: { type: GraphQLString },
        launch_date_local: { type: GraphQLString },
        launch_success: { type: GraphQLBoolean },
        rocket: { type: RocketType }
    })
});

const LaunchType = new GraphQLObjectType({
    name: "Rocket",
    fields: () => ({
        rocket_id: { type: GraphQLString },
        rocket_name: { type: GraphQLString },
        rocket_type: { type: GraphQLString }
    })
});

あなたはデータモデルを作成したら、我々はSpaceX社公式のAPIから取得したデータベースまたはサードパーティのAPIからデータを取得する必要があります。我々は、すべてのクエリのための入り口、処理として、ルートクエリをルートクエリを定義する必要があり、データを返す、参照してくださいGraphQLルートフィールド＆リゾルバを。。

schema.jsコードの増加：

const axios = require("axios");

const RootQuery = new GraphQLObjectType({
    name: "RootQueryType",
    fields: {
        launches: {
            type: new GraphQLList(LaunchType),
            resolve(parent, args) {
                return axios
                    .get("https://api.spacexdata.com/v3/launches")
                    .then(res => res.data);
            }
        }
    }
});

module.exports = new GraphQLSchema({
    query: RootQuery
});

クエリリスト

これが行われ、サーバーAPIは、基本的な構造を完成します！我々は結果を見て、ブラウザでhttpで入力します：// localhostを：5000 / graphqlはGraphiqlを（本番環境を無効にすることをお勧めします）開きます。

我々は、すべてのだけで問い合わせることができますflight_number：

以上の属性：

それはただ驚くばかりではありません！

単一のクエリ

我々はまた、単一のパラメータを渡すことで、情報を照会することができます：

const RootQuery = new GraphQLObjectType({
    name: "RootQueryType",
    fields: {
        launch: {
            type: LaunchType,
            args: {
                flight_number: { type: GraphQLInt }
            },
            resolve(parent, args) {
                return axios
                    .get(
                        `https://api.spacexdata.com/v3/launches/${
                            args.flight_number
                        }`
                    )
                    .then(res => res.data);
            }
        }
    }
});

結果：

これは、使用をお勧めしますFundebug BUG - 、監視ツールをうまく利用します

GraphQLフロントエンド

私たちは、ただのフロントページでgraphqlサービスを呼び出す方法を見てみましょう、ブラウザでGraphiQLコール・インタフェースを使用しています。私たちは、反応フロントを使用しています。

初期設定では、プロジェクトのルートディレクトリにプロジェクトを反応させます。

$ npx create-react-app client

でデバッグを容易にするためにpackage.json増加したスクリプト：

"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev":"concurrently \"npm run server\" \"npm run client\" "

私たちは、スタイルのテーマbootswatchでを使用します。

GraphQL的客户端有多种实现，本次项目使用 Apollo，最流行的GraphQL Client。更多client请参考 GraphQL Clients。

安装依赖

安装如下依赖：

$ cd client
$ npm i apollo-boost react-apollo graphql

其中 apollo-boost 是apollo client本身，react-apollo 是react视图层的集成，graphql 用于解析graphql的查询语句。

设置client

修改App.js内容如下：

import React, { Component } from "react";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import "./theme.css";
import "./App.css";
import logo from "./spacex-logo-light.png";

const client = new ApolloClient({
    uri: "http://localhost:5000/graphql"
});

class App extends Component {
    render() {
        return (
            <ApolloProvider client={client}>
                <div className="container">
                    <img src={logo} id="logo" />
                </div>
            </ApolloProvider>
        );
    }
}

export default App;

和redux使用<Provider>传递store类似，react-apollo 通过 <ApolloProvider>将apollo client向下传递。

实现query

接着我们来实现显示launches的component，新增文件 components/Launches.js：

import React, { Component, Fragment } from "react";
import gql from "graphql-tag";
import { Query } from "react-apollo";
import LaunchItem from "./LaunchItem";

const LAUNCHES_QUERY = gql`
    query LaunchesQuery {
        launches {
            flight_number
            mission_name
            launch_date_local
            launch_success
        }
    }
`;

export class Launches extends Component {
    render() {
        return (
            <Fragment>
                <h1 className="display-4 my-3">Launches</h1>
                <Query query={LAUNCHES_QUERY}>
                    {({ loading, error, data }) => {
                        if (loading) return <h4>Loading...</h4>;
                        if (error) console.log(error);
                        return (
                            <Fragment>
                                {data.launches.map(launch => (
                                    <LaunchItem
                                        key={launch.flight_number}
                                        launch={launch}
                                    />
                                ))}
                            </Fragment>
                        );
                    }}
                </Query>
            </Fragment>
        );
    }
}

export default Launches;

query语句通过 graphql-tag 定义，传入 <Query> 执行获取数据并传入 LaunchItem 显示。

components/LaunchItem.js:

import React from "react";

export default function LaunchItem({
    launch: { flight_number, mission_name, launch_date_local, launch_success }
}) {
    return (
        <div className="card card-body mb-3">
            <div className="col-md-9">
                <h4>Mission: {mission_name}</h4>
                <p>Date: {launch_date_local}</p>
            </div>
            <div className="col-md-3">
                <button className="btn btn-secondary">Launch Details</button>
            </div>
        </div>
    );
}

查询语句通过graphql-tag定义，然后传入<Query>执行。

运行

由于本地调试，client和server分别运行在不同的端口，所以需要先进行跨域处理，使用 cors。

// server.js
const cors = require('cors');
app.use(cors());

效果

好了，大功告成，我们来看一下效果：

结语

今天就主要介绍GraphQL工程的搭建和GraphQL Query的使用，更多关于GraphQL的内容比如 Mutation下次有空会跟大家逐步讲解。

本文灵感来源：Youtube@Traversy Media，感谢

本文Demo Github地址：Github@MudOnTire

本文Demo线上展示：Heroku@graphql-spacex-launches

最后，推荐大家使用Fundebug，一款很好用的BUG监控工具~

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用！