この記事は,新的堆栈に掲載されたFikayo Adepoju氏の寄稿记事です。

GraphQLはAPIのために作られたクエリ言语であり,既存のデータに対するクエリを実行するランタイムです。理解できる完全な形でAPI内のデータについて记述します.GraphQLを利用すれば,クライアント侧から必要な内容だけを问い合わせられると共に,渐次的にAPIを进化させることが容易になり,强力な开発者ツールを実现できます。

GraphQLの公式サイトには上記のように説明されていますが,もっと簡潔にまとめることもできそうです。そこでGraphQLを1文で表現することに挑戦してみました。ただし,これは公式の定義ではなく,あくまでも私の理解に基づいていますのでご注意ください。

  • GraphQLは,クライアントアプリケーションが必要なデータをAPIからフェッチするために设计された言语です。

  • GraphQLを使用すると,クライアントアプリケーションはバックエンドAPIから必要なデータの型とシェイプを取得できます。

  • GraphQLでは,どんなタイプのリクエストでも,クライアントアプリケーションが呼び出すエンドポイントは1つだけです。

  • GraphQLはSQLとよく似ていますが,フロントエンドで机能します。

私なりにシンプルな表现を目指してみましたが,この洗练されたテクノロジーは端的に言い表せるようなものではないようです。とはいえ,それぞれの文はGraphQLの特徴をよく捉えていると思います(もし面接だったら,最后の1つは言わないほうがよさそうですね)。これがGraphQLの大まかな机能です。この记事を最后まで読めば,GraphQLについてさらに深く理解し,実际に活用できるようになるでしょう。

さて,まずGraphQLはどのようにして生まれたのでしょうか。このパラダイムシフトとも呼べるイノベーションの背景を见ていきます。

GraphQLは,李拜伦氏,丹谢弗氏,尼克·施罗克氏のエンジニア3名によるFacebook上のプロジェクトとして始动しました。

2012年2月に最初のプロトタイプが完成し,同年8月ころに的Facebook的iOSアプリケーションに组み込まれました。このテクノロジー自体は2015年年までオープンソースではありませんでした。

このモバイルアプリケーションを担当する开発者は,ネストされたデータや相互にリンクされたデータを大量に扱います。アプリケーションのパフォーマンスを高めるには,ニュースフィード,メッセージング,脸谱ウォール投稿とそのコメントや「いいね!」,投稿へのコメントの「いいね!」などのモジュールを提供するために必要なデータシェイプだけを照会しなければなりません。これは厄介な状况ですよね。

そこで同社はGraphQLの原型となるテクノロジーによって,上记のような问题を解决したのです.Facebookにとっては有效な手段だったようですが,では私たちにはどんなメリットがあり,どのように役立つのでしょうか。

GraphQLのメリット

たとえば,複数のユーザーが単一のブログAPIを使用して記事を投稿している場合を例に挙げてみます。このAPIでは以下のコレクションとよく似たデータを取得することができます。

[{ID:1,名称: “Fikayo Adepoju”,邮件: “fik4christ@yahoo.com” 的帖子:[{ID:1,标题: “调试离子Android应用程序使用Chrome开发者工具”,发表:真,链接: “https://medium.com/@coderonfleek/debugging-an-ionic-android-app-using-chrome-dev-tools-6e139b79e8d2”,作者:1},{ID:2,标题:“举办一个Laravel在Azure上的Web App应用”,发表:真,链接: “https://medium.com/@coderonfleek/hosting-a-laravel-application-on-azure-web-app-b55e12514c46”,作者:1}]}{ID:3,名称: “简保”,邮件: “jane@company.com” 的帖子:[188bet娱乐官网]}]

ユーザーデータには以下のプロパティが定義されています。

  • ID
  • 名称
  • 电子邮件

それぞれの記事には以下のプロパティが定義されています。

  • ID
  • 标题
  • 出版(记事が公开されたかどうかを示すブール値)
  • 链接(記事へのリンク)
  • 作者(ユーザーのID)

さて,ここで以下の3つのフロントエンドコンポーネントを构筑する必要があるとしましょう。

  • ユーザーの情报を表示する简介コンポーネント
  • 記事,記事リンク,著者名を表示するPostコンポーネント
  • ユーザーの详细情报とそのユーザーが投稿した记事のタイトルを表示する作者コンポーネント

これらのコンポーネントには,それぞれ异なったデータシェイプが必要です。従来のREST APIでは,データシェイプごとに固有のエンドポイントが必要でした。それがない场合は,ごちゃごちゃと多数のクエリパラメーターをエンドポイントに追加する必要がありました。たとえば,フロントエンドでユーザーデータをリクエストするとき,ユーザーのIDと电子邮件だけ(名は除外),またはユーザーの名だけを返すように指定することはできませんでした.REST APIはユーザーデータをすべて返します。このため,ユーザーデータに上记の例よりも多くのパラメーターが含まれている场合には,その分だけ处理が面倒になってしまいます。

“ユーザーデータがすべて返されるだけで,そんなに手間になるかな吗?“と首を傾げている方もいらっしゃるかもしれません。ありきたりな回答になってしまいますが,それはケースバイケースです。

今度は,ブログの著者全员の名前だけを确认したい场合を考えてみます。著者が50人いて,そのページをモバイルアプリケーションで阅覧するとしたらどうなるでしょう。著者名を确认するためだけに,50人分のユーザーデータのすべてがアプリケーションにダウンロードされてしまい,かなりのコストがかかります。

GraphQLなら,クエリのデータシェイプをクライアントで制御できます。ユーザーは以下のように指示するだけでよいのです。

ユーザーデータから名前だけを取得して,よろしく。

するとGraphQL APIは著者の名前だけを含むユーザーデータのコレクションを返します。この处理は単一のエンドポイントで実行されます.RESTと异なり,GraphQL APIがエクスポーズするエンドポイントは1つだけです。このエンドポイントが,クライアントからのすべてのリクエストに対応します。

こんな魅力的な说明を読んだら,すべてのAPIをGraphQLで书き直したい冲动に駆られるでしょう。フロントエンド开発者の皆さんは,API开発者に今后GraphQL APIだけを作るように迫りたくなっているかもしれません。でもいったん落ち着いて。もう少し详しく学んでいきましょう。

GraphQLクエリのしくみ

ここまででGraphQLがクライアントの言语であることはご理解いただけたと思います。では,クライアントはどのようにこの言语を处理するのでしょう.GraphQLのリクエスト送信にはどういったフォーマットが使用されるのでしょうか。

リクエストには,データを记述するための特别なフォーマットが使用されます。このフォーマットについて说明するには,実际にGraphQLクエリを作成してみるのが一番の早道です。そこで,前のセクションで绍介した3つのコンポーネントに关するデータをリクエストするクエリを作成してみましょう。

ユーザーの情报を表示する简介コンポーネント

このコンポーネントにはユーザーの情報が必要です。GraphQLでのリクエストは以下のようになります。

{用户(ID:1){ID名称电子邮件}}

このリクエストでは,ユーザーのIDを指定してGraphQLエンドポイントに问い合わせているため,そのユーザーのID,名前,メールアドレスが返されます。

記事,記事リンク,著者名を表示するPostコンポーネント

このコンポーネントには,特定の记事とその著者名が必要になります。

{后(ID:2){标题链接作者{名}}}

上記のクエリでは,記事IDを送信することで,1件の記事のデータをリクエストしています。結果として,その記事のタイトル,リンク,著者名が返されます。

ユーザーの详细情报とそのユーザーが投稿した记事のタイトルを表示する作者コンポーネント

このコンポーネントには,ユーザーの情报と,そのユーザーが投稿した记事のタイトルが必要になります。

{用户(id: 2){电子邮件名称贴子{title}}

このクエリは,あるユーザーのデータと,そのユーザーが投稿したすべての记事のデータを要求します。ただし,记事データのうち取得するのはタイトルのです。そのユーザーが投稿した记事の行列が返されますが,各上传オブジェクトには记事タイトルのみが含まれます。

ここで,私がひいきにしているライターの安德鲁·米德氏が作成したGraphQLデモを使用して,クエリを试してみましょう。このデモも,ユーザーとその投稿记事をエクスポーズするAPIに基づいています。

ユーザー全员のデータと,各ユーザーが投稿した记事のタイトルを照会します。解答を见る前に,まず自分でクエリを书いてみてください。

{{用户ID名称电子邮件帖子标题{}}}

いかがでしたか吗?GraphQL APIは自己文書化されていて,不正なクエリにフラグを立て,参考になるエラーメッセージを返してくれるので便利です。

このクエリをGraphQLプレイグラウンドhttps://graphql-demo.mead.io/の左侧のウィンドウに贴り付け,再生ボタンをクリックしてクエリを実行します。以下のような结果が返されるはずです。

うまく行きましたね!

これで,GraphQLの大まかなしくみをご理解いただけたと思います。クエリウィンドウにさまざまなクエリを貼り付けて,GraphQLでどのようにデータが取得されるのか試してみてください。画面の右端に[SCHEMA]という緑色の小さなタブがあります。このタブを開くと、APIがエクスポーズするデータの構造を確認できます。

GraphQLクエリの解决方法

この記事の冒頭で,GraphQLの特徴について簡単に説明したのを覚えていますか。その中で以下の特徴についても軽く触れました。

GraphQLは,バックエンドAPIとやり取りできる

つまり,私たちのはAPI GraphQLクエリを読み,理解できるということです。

そして嬉しいお知らせがあります。

GraphQL APIの実装に必要な处理は,ほとんどがバックエンドで行われます。

バックエンド開発者の皆さんにはごめんなさい。

必要に応じてクライアントからクエリを実行してデータを取得できるようにするには,バックエンドからGraphQLエンドポイントをエクスポーズしなければなりません。

これは,どのように行えばよいのでしょうか。

バックエンドで,クライアントに提供するデータをエクスポーズするインターフェイスを作成する必要があります。

ブログAPIの例で考えてみましょう。ユーザーに关するデータと记事に关するデータがあります。この2つは别々のエンティティです.GraphQLでは,スキーマを作成してこの2つを定义します。

GraphQLでは,エンティティ(独立したデータの断片のこと。モジュールと言ってもかまいません)を型で表します。そこで,スキーマ内に用户型と邮政型を定义します。型を定义するには,その型のクライアントに提供されるプロパティをリストにします。以下に用户型と帖子型を定义します。

类型用户{ID:诠释!名称:字符串!电子邮件:字符串信息:[!投递]} Post类型{ID:诠释!标题:串!出版:布尔!链接:字符串作者:用户!}

詳しく見ていきましょう。型はキーと値のペアで定義します。キーはエクスポーズしたいプロパティ,値は標準のGraphQLデータ型またはカスタム型です。

GraphQLには复数のデフォルト型が付属しています。最も一般的なのはスカラー型です。以下の5つのスカラー型を使って,APIが返すプロパティのデータ型を定义することができます。

  • ID:一意の识别子を使ってフィールドを定义する
  • 诠释:符号付き32ビット整数
  • 浮动:符号付き倍精度浮动小数点数
  • 字符串:UTF-8文字シーケンス
  • 布尔:真正または假

カスタムのスカラー型も定义できますが,高度な内容になるので今回は取り上げません。

先ほど定义した用户型と帖子型はカスタム型です。用户型の帖子プロパティが,カスタム型である邮报型に设定されています。これは,ユーザーが投稿した记事の行列を返します。また邮政型の创作プロパティは,记事を投稿した著者の详细を返します。

感叹符(!)は空を许容しないフィールドであることを示します。感叹符が付いていないフィールドは空を返すことができます。

これらの型を照会するには,GraphQLのデフォルト型の1つである查询型を定义する必要があります。

查询型を使って,照会するデータポイントを定义できます。たとえば,次のようなクエリを作成するとします。

{{用户名电子邮件}}

查询型の内部に用户のデータ照会ポイントが定义されています.Query型は一般的に以下のように定义します。

类型的查询{用户:[用户!]!用户(ID:智力):用户!}

この定义では,2つの照会ポイントをエクスポーズします。まず,用户によってユーザーのコレクションがフェッチされます。そして用户によって,指定したIDのユーザー1名がフェッチされます。

この说明についてはひとまず问题ないとしても,どうやってこれらの照会ポイントをデータソースに接続するのか,クライアントがリクエストしたプロパティだけを返すにはどうしたらよいのかといった疑问が涌いてきていることでしょう。照会ポイントをデータソースに接続するには,GraphQLのもう1つのコンセプト「リゾルバ」を使用します。そして,クライアントがリクエストしたプロパティだけを返す处理は,GraphQLが自动的に行うため,心配する必要はありません。

リゾルバは,照会ポイントをマッピングして,リクエストされたエンティティを返す关数です。

たとえば,データソースがユーザーの行列である场合,用户照会ポイントのリゾルバは次のようになります。

function(){返回usersArray;}

用户照会ポイントのリゾルバは次のようになります。

函数({ID}){返回usersArray.find((用户)=> user.id == ID);}

构文にはそれほどこだわる必要はありません。リゾルバ关数の书き方はプログラム言语によって异なります。

ここまでの内容をまとめておきます。

  • データエンティティ/モデルごとにカスタム型を定義する。
  • 查询型を使うと,必要に応じてさまざまな照会ポイントをエクスポーズできる。
  • リゾルバを使うと,各照会ポイントのクエリを解決できる。

そろそろ皆さんは「これをPHP,Node.js的,巨蟒,その他のバックエンド言语で実行するにはどうしたらよいの?」と思っているころでしょう。安心してください。次のセクションで详しくご说明します。

GraphQLを既存のバックエンドと组み合わせて使用​​する

现时点ではまだ以下についての说明が完了していません。

  • これらのコンセプトをバックエンド言语で実装する方法
  • 単一のGraphQL APIで各种の型,查询型,リゾルバを使用する方法
  • すべてのクエリに答える魔法のような単一のエンドポイントをエクスポーズする方法

GraphQLは言语に依存しません。ここまでのセクションで绍介したコンセプトは,特定の言语に依存しないため,GraphQLをサポートするあらゆる言语に适用できます。

実装に关しては,一般的なバックエンド言语向けに,GraphQL APIの実装用のライブラリが用意されています。

c#, node . js (JavaScript), PHP, Javaのようなバックエンド言語/フレームワークに対応するライブラリは,GraphQL公式サイトのサーバーライブラリページに记载されています。

これらのライブラリと,ここまでのセクションで学んだコンセプトを组み合わせることで,GraphQLサーバーをすぐに利用できるようになります。

node . jsでシンプルなGraphQLサーバーを構築する

node . jsを使用してシンプルなGraphQLサーバーを構築しましょう.Node.jsは静的データストアを使用します(本番環境ではほとんどの場合,データベースのデータです)。

この演習の要件は,システムにnode . js (NPMに付属)がインストールされていることだけです。

さっそく始めましょう。まず,プロジェクトのディレクトリを作成します。

MKDIR graphql服务器

次に,プロジェクトのルートに移动し,以下のコマンドを実行して,的package.jsonファイルのスキャフォールディングをすばやく行います。

npm init - y

npmの以下の3つのパッケージが必要です。

  • 表达:シンプルなnode . jsサーバーを作成する
  • GraphQL:Node.js的のGraphQLサーバーライブラリ
  • Express-GraphQL: GraphQLサーバーを作成するための表达ミドルウェア

以下のコマンドを実行してこれらのパッケージをまとめてインストールします。

故宫安装快车graphql快递,graphql

インストールが完了したら,GraphQLサーバーを構築します。

まず,静的データストアを作成してエクスポートします。プロジェクトのルートにdata.jsという名前のファイルを作成して,以下のコードを贴り付けます。

/ * * data.js / const的用户= [{ID:1,名称: “Fikayo Adepoju”,电子邮件地址: “fik4christ@yahoo.com”,柱:[{ID:1,标题:“调试离子Android应用使用Chrome开发工具”,发表:真,链接: “https://medium.com/@coderonfleek/debugging-an-ionic-android-app-using-chrome-dev-tools-6e139b79e8d2”,作者:1},{ID:2,标题: “托管在Azure上Web App的一个Laravel应用”,发表:真,链接:“https://medium.com/@coderonfleek/hosting-a-laravel-application-on-azure-web-app-b55e12514c46" ,作者:1}]},{ID:3,名称: “简保”,邮件: “jane@company.com” 的帖子:[]}]188bet娱乐官网module.exports = {用户};

このファイルは,ユーザーデータのコレクションと各ユーザーの记事をエクスポートします。

次に,スキーマを构筑してエクスポートします。プロジェクトのルートにschema.jsという名前のファイルを作成して,以下のコードを贴り付けます。

/ * * schema.js / const的{buildSchema} =需要( “graphql”);常量架构= buildSchema(`键入查询{用户:[用户!]!用户(ID:智力):用户!}类型用户{ID:ID名称:字符串电子邮件:字符串信息:[!投递]}式{!ID:ID标题:字符串公布:布尔链接:字符串作者:!!!用户}`后);module.exports =架构;

このファイルでは,Node.js的のGraphQLライブラリにあるbuildSchemaメソッドを使用してスキーマをセットアップします。用户型と邮政型という2つのカスタム型を作成し,クエリ定义内で用户と用户の照会ポイントをエクスポーズします。

次に,これらのクエリを处理するリゾルバを作成します。プロジェクトのルートにresolvers.jsという名前のファイルを作成して,以下のコードを贴り付けます。

/ *解析器。js*/ const {Users} = require('./data') const resolvers = {Users: async(_) =>{返回用户;}, user: async ({id}, context) => user. find((user) => userid == id)}};模块。出口=解析器;

このファイルでは,data.jsから用户コレクションをインポートして,用户と用户の照会ポイントのリゾルバに適切なデータを返します。

次に,スキーマをリゾルバに接続して,GraphQLエンドポイントをエクスポーズします。

プロジェクトのルートにindex.jsという名前のファイルを作成して,以下のコードを贴り付けます。

/ * * index.js / const的表达=需要( “表达”);常量graphqlHTTP =需要( “表达-graphql”);常量架构=需要( “./模式”);常量解析器=需要( “./解析器”);常量应用程式=表达();app.use( “/ graphql”,graphqlHTTP({架构,rootValue:解析器,graphiql:真}));常量端口= process.env.PORT ||4200;app.listen(端口);的console.log(在http`服务器准备://本地主机:4200 / graphql`);

このファイルでは,ExpressJSアプリケーションを作成し,表达-graphqlミドルウェアパッケージを使って,スキーマをリゾルバに接続した后,エンドポイント/ graphqlでGraphQL APIをエクスポーズします。

3つ目のパラメーターはgraphiql真正に设定します。これでGraphiQLツールを利用できるようになります.GraphiQL(ⅰが入ったことにお気付きでしょうか)は,GraphQLクエリをテストするための网络ベースのGUIです。このツールはGraphQLパッケージに含まれています。

最后に,サーバーがポート4200でリッスンするように设定します。

ここまでの手順が完了したら,いよいよGraphQLサーバーを実行します。

プロジェクトのルートで以下のコマンドを実行して,サーバーを起动します。

节点index.js

ポート4200でサーバーが実行中であることを示すコンソールメッセージが表示されます。

任意のブラウザーでhttp://localhost:4200/graphqlにアクセスします。

完璧です!

次に,クエリウィンドウで以下のクエリを実行します。

{{用户名通过电子邮件发送帖子标题{}}}

再生ボタンをクリックすると,次のような画面が表示されます。

機能のしくみをよく理解できるよう,GraphiQLウィンドウでさまざまなクエリを自由に試してみてください。

画面の右上隅の[文件]ボタンをクリックすると,ウィンドウが開き,スキーマが表示されます。ここを見ればスキーマについて理解を深められます。スキーマは,コード作成やAPIの自動文書化などに使用できる,とても便利なツールです。

まとめ

長旅,お疲れ様でした!これで,GraphQLの基礎知識を把握し,シンプルなGraphQLサーバーを構築できるようになりました。GraphQLには、この記事で取り上げた機能以外にも、新規ユーザーの作成、ユーザー データの編集、新規投稿の保存、結果のページネーションなど、さまざまな用途に活用できます。GraphQL の強力な機能をぜひお試しください。また、GraphQL API に継続的インテグレーションのパイプラインを追加する方法についても,别の记事で绍介しています。GraphQL APIの自动テスト表达GraphQLサーバーのHerokuへの継続的デプロイメントの記事をご覧ください。

GraphQLの詳細については,GraphQL公式サイトや,バックエンド言语のサーバーライブラリをご覧ください。

すばらしいコーディングができますように!


Fikayo Adepoju氏は,网络ソリューションやモバイルソリューションの开発に10年以上携わり,开発者としてマルチに活跃する傍ら,执笔活动にも取り组んでいます。现在は科技专家咨询でソフトウェアリードを务め,年底PacktやUdemyのコース开発が担当です。教えることに强い情热を倾けており,将来は执笔を本业にすることを目指しています。