node.jsとmongodbを使用してGraphQL Serverを作成します

キーテイクアウト

• node.jsとExpressを使用してサーバーを確立し、Mongodbをデータ管理のためにMongooseと統合し、クエリと突然変異を効率的に処理するサーバーの能力を高めます。 Express-GraphQLミドルウェアを使用してサーバーにGraphQLを実装します。これにより、ユーザーフレンドリーなJSON形式の作成に重点を置いて、HTTPリクエストの処理とJSON応答の出力を簡素化します。
データインタラクションを正確に管理するためのタイプ、クエリ、および突然変異で構成されるGraphQLスキーマを定義し、データ構造が一貫性とセキュリティのためにMongoDBモデルと整列することを保証します。 GraphQLクエリを使用して単一のHTTP要求で特定のデータフィールドを取得することにより、データ検索を最適化し、特にネットワーク接続が遅いモバイルデバイスで転送されるデータの量を大幅に削減し、パフォーマンスを改善します。
• Postmanなどのツールを使用してGraphQLエンドポイントをテストして、クエリと突然変異のセットアップと機能を検証し、サーバーがさまざまなデータ要求に正しく効率的に応答するようにします。
• この記事は、ライアン・チェンキーによって査読されました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！ クライアント側のサーバーからデータを要求することは、新しい概念ではありません。これにより、アプリケーションはページを更新せずにデータをロードできます。これは、サーバーからレンダリングされたページを取得する代わりに、クライアント側にレンダリングするために必要なデータのみを要求する単一ページアプリケーションで最も使用されています。
• 過去数年間でWeb全体で最も一般的なアプローチは、REST Architectural Styleです。ただし、このアプローチは、高いデータ需要アプリケーションにいくつかの制限をもたらします。 RESTFULシステムでは、複数のHTTP要求を行い、必要なすべてのデータを取得する必要があります。これには、パフォーマンスに大きな影響があります。単一のHTTPリクエストで複数のリソースを要求する方法があった場合はどうなりますか？
• クライアント側とサーバー側の間の通信を統合するクエリ言語であるGraphQLの導入。クライアント側は、単一のリクエストで、必要なデータを正確に説明できます。 この記事では、すべてのクエリと突然変異を処理するGraphQLルートを備えたnode.js/Expressサーバーを作成します。次に、いくつかの投稿リクエストを送信してこのルートをテストし、郵便配達員を使用して結果を分析します。
このアプリケーションの完全なソースコードをここで見つけることができます。また、ここからダウンロードできる郵便配達員コレクションも作成しました。 ExpressサーバーでGraphQLエンドポイントを設定します

最初に行うことは、Expressフレームワークを使用してnode.jsサーバーを作成することです。また、MongodbとMongooseを使用してデータの持続性を使用し、BabelはES6を使用します。コードは実行時にES5に輸送されるため、ビルドプロセスは必要ありません。これはindex.js：で行われます

<span>// index.js
</span><span>require('babel/register');
</span><span>require('./app');
</span>

<span>// app.js
</span><span>import express from 'express';
</span><span>import graphqlHTTP from 'express-graphql';
</span><span>import mongoose from 'mongoose';
</span>
<span>import schema from './graphql';
</span>
<span>var app = express();
</span>
<span>// GraphqQL server route
</span>app<span>.use('/graphql', graphqlHTTP(req => ({
</span>  schema<span>,
</span>  <span>pretty: true
</span><span>})));
</span>
<span>// Connect mongo database
</span>mongoose<span>.connect('mongodb://localhost/graphql');
</span>
<span>// start server
</span><span>var server = app.listen(8080, () => {
</span>  <span>console.log('Listening at port', server.address().port);
</span><span>});
</span>

GraphQLがリクエストを理解するには、スキーマを定義する必要があります。そして、GraphQLスキーマは、クエリと突然変異のグループに他なりません。クエリは、データベースから取得して、データベースへのあらゆる種類の更新として変異を取得するためのリソースと考えることができます。例として、ブログポストとコメントマングースモデルを作成し、その後、いくつかのクエリと突然変異を作成します。

graphqlタイプ

Mongooseのように、GraphQlではデータ構造を定義する必要があります。違いは、クエリと突然変異ごとに定義し、どのタイプのデータが入力できるか、応答で送信されるものを定義することです。これらのタイプが一致しない場合、エラーがスローされます。冗長に見えるかもしれませんが、マングースでスキーマモデルをすでに定義しているため、次のような大きな利点があります。

あなたは許可されているものを制御します。これにより、システムセキュリティが向上します許可されているものを制御します。これは、特定のフィールドを定義して、取得することを許可されないことを意味します。たとえば、パスワードまたはその他の機密データ

GraphQLタイプのソースコードをGRAPHQL/TYPES/で見つけることができます。次の例は次のとおりです
ここでは、ブログ投稿出力GraphQLタイプを定義しています。これは、クエリと突然変異を作成するときにさらに使用します。構造がMongoose Model blogpostに似ていることに注意してください。それは仕事の複製のように見えるかもしれませんが、これらは分離された懸念です。 Mongooseモデルはデータベースのデータ構造を定義します。GraphQLタイプは、サーバーのクエリまたは変異で受け入れられているもののルールを定義します。
• GraphQl Schema Creation
• Mongooseモデルと作成されたGraphQLタイプを使用して、GraphQLスキーマを作成できるようになりました。

• 名前 - これは一意であり、オブジェクトを識別する必要があります;
• フィールド - この場合よりもオブジェクトを受け入れるプロパティは、私たちのクエリと突然変異になります。

フィールドに通過するクエリと変異変数は、単純なJavaScriptオブジェクトです。キーは、突然変異名またはクエリ名です。値は、GraphQLにそれらをどうするかを伝える構成を備えた単純なJavaScriptオブジェクトです。次のGraphQLクエリを例として見てみましょう

grahpqlについては、このクエリで何をすべきかを理解するには、ブログ投稿とコメントクエリを定義する必要があります。したがって、私たちのクエリ変数は次のようなものになります：

<span>// index.js
</span><span>require('babel/register');
</span><span>require('./app');
</span>

変異についても同じことが言えます。これは、クエリまたは突然変異にあるキーとクエリに入れた名前の間に直接的な関係があることを説明するためです。次に、これらのクエリと突然変異のそれぞれがどのように定義されているかを見てみましょう。

<span>// app.js
</span><span>import express from 'express';
</span><span>import graphqlHTTP from 'express-graphql';
</span><span>import mongoose from 'mongoose';
</span>
<span>import schema from './graphql';
</span>
<span>var app = express();
</span>
<span>// GraphqQL server route
</span>app<span>.use('/graphql', graphqlHTTP(req => ({
</span>  schema<span>,
</span>  <span>pretty: true
</span><span>})));
</span>
<span>// Connect mongo database
</span>mongoose<span>.connect('mongodb://localhost/graphql');
</span>
<span>// start server
</span><span>var server = app.listen(8080, () => {
</span>  <span>console.log('Listening at port', server.address().port);
</span><span>});
</span>

休憩ソリューションでは、これに対して2つのHTTPリクエストを行う必要があります。 1つはブログ投稿を取得し、もう1つはコメントを取得するために、これは次のようになります。

graphqlでは、次のクエリを使用して、1つのHTTPリクエストでのみこれを作成できます。

1つのリクエストで必要なすべてのデータを取得できます。これだけでパフォーマンスが向上します。また、使用する正確なプロパティを要求することもできます。上記の例では、応答はブログ投稿のタイトルと説明のみをもたらすだけであり、コメントはテキストのみをもたらすだけです。

<span>// graphql/types/blog-post.js
</span><span>import <span>{
</span></span><span>  <span>GraphQLObjectType,
</span></span><span>  <span>GraphQLNonNull,
</span></span><span>  <span>GraphQLString,
</span></span><span>  <span>GraphQLID
</span></span><span><span>}</span> from 'graphql';
</span>
<span>export default new GraphQLObjectType({
</span>  <span>name: 'BlogPost',
</span>  <span>fields: {
</span>    <span>_id: {
</span>      <span>type: new GraphQLNonNull(GraphQLID)
</span>    <span>},
</span>    <span>title: {
</span>      <span>type: GraphQLString
</span>    <span>},
</span>    <span>description: {
</span>      <span>type: GraphQLString
</span>    <span>}
</span>  <span>}
</span><span>});
</span>

<span>// index.js
</span><span>require('babel/register');
</span><span>require('./app');
</span>

ここでは、IDパラメーターに基づいて単一のブログ投稿を取得するクエリを作成しています。クエリの出力を検証する以前に作成したタイプを指定していることに注意してください。また、このクエリに必要なargumentsを使用してARGSオブジェクトを設定しています。そして最後に、データベースを照会してデータを返す解決関数。

<span>// app.js
</span><span>import express from 'express';
</span><span>import graphqlHTTP from 'express-graphql';
</span><span>import mongoose from 'mongoose';
</span>
<span>import schema from './graphql';
</span>
<span>var app = express();
</span>
<span>// GraphqQL server route
</span>app<span>.use('/graphql', graphqlHTTP(req => ({
</span>  schema<span>,
</span>  <span>pretty: true
</span><span>})));
</span>
<span>// Connect mongo database
</span>mongoose<span>.connect('mongodb://localhost/graphql');
</span>
<span>// start server
</span><span>var server = app.listen(8080, () => {
</span>  <span>console.log('Listening at port', server.address().port);
</span><span>});
</span>

<span>// graphql/types/blog-post.js
</span><span>import <span>{
</span></span><span>  <span>GraphQLObjectType,
</span></span><span>  <span>GraphQLNonNull,
</span></span><span>  <span>GraphQLString,
</span></span><span>  <span>GraphQLID
</span></span><span><span>}</span> from 'graphql';
</span>
<span>export default new GraphQLObjectType({
</span>  <span>name: 'BlogPost',
</span>  <span>fields: {
</span>    <span>_id: {
</span>      <span>type: new GraphQLNonNull(GraphQLID)
</span>    <span>},
</span>    <span>title: {
</span>      <span>type: GraphQLString
</span>    <span>},
</span>    <span>description: {
</span>      <span>type: GraphQLString
</span>    <span>}
</span>  <span>}
</span><span>});
</span>

<span>// graphql/index.js
</span><span>import <span>{
</span></span><span>  <span>GraphQLObjectType,
</span></span><span>  <span>GraphQLSchema
</span></span><span><span>}</span> from 'graphql';
</span>
<span>import mutations from './mutations';
</span><span>import queries from './queries';
</span>
<span>export default new GraphQLSchema({
</span>  <span>query: new GraphQLObjectType({
</span>    <span>name: 'Query',
</span>    <span>fields: queries
</span>  <span>}),
</span>  <span>mutation: new GraphQLObjectType({
</span>    <span>name: 'Mutation',
</span>    <span>fields: mutations
</span>  <span>})
</span><span>});
</span>

クエリと突然変異の構文はまったく同じであり、突然変異にクエリを変更するだけであることに注意してください。 クエリから行うのと同じように、突然変異からデータを尋ねることができます。 BlogPostCommentINCの上記のクエリにあるように、フラグメントを指定しないことで、操作を確認するのに十分な場合が多い真または誤った返品値を求めています。または、AddComment変異のようなデータを要求することもできます。これは、サーバーで生成されたデータのみを取得するのに役立ちます。

query <span>{
</span>    blogPosts <span>{
</span>        _id<span>,
</span>        title
    <span>}
</span>    comments <span>{
</span>        text   
    <span>}
</span><span>}
</span>

<span>{
</span>    <span>blogPosts: {...},
</span>    <span>comments: {...}
</span><span>}
</span>

次のような場所にGet Requestを送信または投稿する方法はたくさんあります。

• ブラウザ - ブラウザにURLを入力することにより、GETリクエストを送信します。これには、投稿リクエストを送信できないという制限があります
• curl - コマンドラインファン向け。あらゆる種類のリクエストをサーバーに送信できます。それは最高のインターフェイスではありませんが、リクエストを保存することはできず、コマンドラインにすべてを書く必要があります。
graphiql - graphqlに最適なソリューション。これは、サーバーにクエリを作成するために使用できるブラウザIDEです。次のような素晴らしい機能があります：構文の強調表示と先にタイプ

これらの3つからGraphiQLをお勧めしますが、何よりも郵便配達員よりもお勧めします。このツールは間違いなくAPIテストの進歩です。あらゆるタイプのリクエストのコレクションを作成および保存できる直感的なインターフェイスを提供します。 APIのテストを作成して、ボタンをクリックして実行することもできます。また、共同機能があり、リクエストのコレクションを共有できます。そこで、ここからダウンロードできるものを作成しました。これを郵便配達員にインポートできます。郵便配達員がインストールされていない場合は、絶対にお勧めします。

サーバーを実行することから始めましょう。ノード4以下をインストールする必要があります。そうでない場合は、NVMを使用してインストールすることをお勧めします。その後、コマンドラインで以下を実行できます：

<span>// index.js
</span><span>require('babel/register');
</span><span>require('./app');
</span>

以下のようなJSON形式で必要なGraphQLクエリと変数を持つボディを作成できるようになりました。

私が提供したコレクションをインポートしたと仮定すると、テストできるクエリと突然変異のリクエストが既にあるはずです。ハードコーディングされたMongo IDを使用しているため、リクエストを順番に実行すると、すべて成功する必要があります。私がそれぞれの体に入れたものを分析すると、この記事で議論されているものの単なるアプリケーションであることがわかります。また、最初のリクエストを複数回実行すると、複製IDになるため、エラーの返された方法がわかります。

この記事では、GraphQLの可能性と、それがRESTアーキテクチャスタイルとどのように異なるかを紹介しました。この新しいクエリ言語は、Webに大きな影響を与えるように設定されています。特に、より複雑なデータアプリケーションでは、必要なデータを正確に説明し、単一のHTTPリクエストでリクエストできるようになりました。

以上がnode.jsとmongodbを使用してGraphQL Serverを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。