この記事では、安全なNode.js GraphQLAPIを作成する方法に関するクイックガイドを紹介することを目的としています。
頭に浮かぶかもしれないいくつかの質問は次のとおりです。
これらはすべて有効な質問ですが、それらに答える前に、Web開発の現在の状態の概要を簡単に説明する必要があります。
事実上すべてのシナリオで、詳細に知る必要のないAPIが見つかります。たとえば、APIがどのように構築されたかを知る必要はなく、以前と同じテクノロジーを使用する必要もありません。それをあなた自身のシステムに統合することができます。提供されるAPIを使用すると、特定のテクノロジースタックに依存することなく、サービスとクライアントの両方が通信できる共通の標準でサービス間で通信する方法を提供できます。
適切に構造化されたAPIを使用すると、複数の種類のクライアントとフロントエンドアプリケーションにサービスを提供できる、堅牢で保守可能でスケーラブルなAPIを使用できます。
GraphQLはAPIのクエリ言語であり、Facebookで内部使用するために開発され、2015年に公開されました。読み取り、書き込み、およびリアルタイムの更新をサポートします。また、オープンソースであり、一般的にRESTや他のアーキテクチャと比較されます。一言で言えば、これは以下に基づいています。
この記事は、GraphQL APIを構築して使用する方法について、シンプルでありながら実際のシナリオを示すことを目的としていますが、GraphQLの詳細な紹介は提供しません。 GraphQLチームが包括的なドキュメントを提供し、いくつかのベストプラクティスをリストしているため、理由は単純です。 GraphQLの概要 。
前に説明したように、クエリは、クライアントがAPIからデータを読み取って操作できる方法です。オブジェクトのタイプを渡して、受け取るフィールドの種類を選択できます。簡単なクエリは次のようになります。
query{ users{ firstName, lastName } }
このクエリでは、ユーザーのスキーマからすべてのユーザーにリーチしようとしていますが、firstName
のみを受信していますおよびlastName
。このクエリの結果は、次のようになります。
{ 'data': { 'users': [ { 'firstName': 'Marcos', 'lastName': 'Silva' }, { 'firstName': 'Paulo', 'lastName': 'Silva' } ] } }
クライアントでの使用は非常に簡単です。
APIを作成する目的は、他の外部サービスと統合できるサービスとしてソフトウェアを使用できるようにすることです。アプリケーションが単一のフロントエンドによって消費されている場合でも、このフロントエンドを外部サービスと見なすことができます。そのため、2つの間の通信がAPIを介して提供されると、さまざまなプロジェクトで作業できます。
SQLサーバーでのパフォーマンスの最適化
大規模なチームで作業する場合は、分割してフロントエンドチームとバックエンドチームを作成し、両方が同じテクノロジーを使用して作業を容易にすることができます。 APIを設計するときは、プロジェクトにより適したものと、目的のソリューションに近づくものを選択することが重要です。
この記事では、GraphQLを使用するAPIを構築するためのスケルトンに焦点を当てます。
それはちょっとした取り締まりかもしれませんが、私はそれを助けることはできません: 場合によります 。
GraphQLは、いくつかのシナリオに非常によく適合するアプローチです。 RESTは、いくつかのシナリオでも実証されているアーキテクチャアプローチです。今日、一方が他方より優れている理由や、GraphQLの代わりにRESTのみを使用する必要がある理由を説明する記事がたくさんあります。また、GraphQLを内部で使用しながら、APIのエンドポイントをRESTベースのアーキテクチャとして維持できる多くの方法もあります。
最善のガイダンスは、各アプローチの利点を理解し、作成しているソリューションを分析し、チームがソリューションをどの程度快適に使用できるかを評価し、チームが学習して理解できるように指導できるかどうかを評価することです。アプローチを選択する前に高速で移動します。
この記事は、GraphQLとRESTの主観的な比較というよりも、実用的なガイドです。 2つの詳細な比較を読みたい場合は、別の記事を確認することをお勧めします。 GraphQLとREST-GraphQLチュートリアル 。
ラズベリーパイに最適なウェブサーバー
今日の記事では、Node.jsを使用したGraphQLAPIの作成に焦点を当てます。
GraphQLには、使用できるいくつかの異なるライブラリがあります。この記事の目的のために、Node.jsが広く使用されていることとその事実からJavaScriptをNode.jsで使用するというアイデアを採用することにしました。 Node.jsにより、開発者は サーバー側の開発に使い慣れたフロントエンド構文を使用する。
別のApeeScapeEngineering Blogの記事で示したものと同様に、RESTベースのAPIを使用したアプローチと比較することも役立ちます。 Node.jsでの安全なRESTAPIの作成 。この記事では、Node.jsの使用方法も紹介しています。 Express これら2つのアプローチの違いを比較できるスケルトンRESTAPIを開発します。 Node.jsは、スケーラブルなネットワークアプリケーション、グローバルコミュニティ、およびで見つけることができるいくつかのオープンソースライブラリを使用して設計されました。 npmのウェブサイト 。
今回は、GraphQL、Node.js、Expressを使用してスケルトンAPIを構築する方法を紹介します。
前に概説したように、GraphQL APIのスケルトンのアイデアを構築します。先に進む前に、Node.jsとExpressの基本を知っておく必要があります。このGraphQLの例のために作成されたプロジェクトのソースコードが利用可能です ここに 。
2種類のリソースを処理します。
ユーザーには、次の構造が含まれます。
製品には次の構造が含まれます。
コーディング標準については、このプロジェクトではTypeScriptを使用します。ソースファイルでは、TypeScriptでコーディングを開始するようにすべてを構成できます。
まず、最新のNode.jsバージョンがインストールされていることを確認してください。公開時点では、現在のバージョンは10.15.3です。 Nodejs.org 。
node-graphql
という名前の新しいフォルダから始めましょう。そこで、ターミナルまたはGit CLIコンソールを開き、次のコマンドを使用してマジックを開始できます:npm init
。
プロセスをスピードアップするには、package.json
を交換しますGitリポジトリには、必要なすべての依存関係が含まれている必要があります。
{ 'name': 'node-graphql', 'version': '1.0.0', 'description': '', 'main': 'dist/index.js', 'scripts': { 'tsc': 'tsc', 'start': 'npm run tsc && node ./build/app.js' }, 'author': '', 'license': 'ISC', 'dependencies': { '@types/express': '^4.16.1', '@types/express-graphql': '^0.6.2', '@types/graphql': '^14.0.7', 'express': '^4.16.4', 'express-graphql': '^0.7.1', 'graphql': '^14.1.1', 'graphql-tools': '^4.0.4' }, 'devDependencies': { 'tslint': '^5.14.0', 'typescript': '^3.3.4000' } }
更新されたpackage.json
で、もう一度ターミナルを押して、npm install
を使用します。 Node.jsおよびExpress内でこのGraphQLAPIを実行するために必要なすべての依存関係をインストールします。
次の部分は、TypeScriptモードを構成することです。 tsconfig.json
というファイルが必要です次のルートフォルダにあります。
{ 'compilerOptions': { 'target': 'ES2016', 'module': 'commonjs', 'outDir': './build', 'strict': true, 'esModuleInterop': true } }
この構成のコードのロジックは、appフォルダーにあります。そこでapp.ts
を作成できますファイルと基本的なテストのために、そこに次のコードを追加します。
console.log('Hello Graphql Node API tutorial');
構成により、npm start
を実行できるようになりました。ビルドを待ち、すべてが正しく機能していることをテストできるようにします。ターミナルコンソールに、「Hello GraphQL NodeAPIチュートリアル」が表示されます。バックシーンでは、構成は基本的にTypeScriptコードを純粋なJavaScriptにコンパイルしてから、build
でビルドを実行します。フォルダ。
それでは、GraphQLAPIの基本的なスケルトンを構成しましょう。プロジェクトを開始するために、3つの基本的なインポートを追加します。
すべてをまとめ始めましょう。
import express from 'express'; import graphqlHTTP from 'express-graphql'; import {makeExecutableSchema} from 'graphql-tools';
これで、少しコーディングを開始できるはずです。次のステップは、Expressでアプリを処理し、次のような基本的なGraphQL構成を処理することです。
import express from 'express'; import graphqlHTTP from 'express-graphql'; import {makeExecutableSchema} from 'graphql-tools'; const app: express.Application = express(); const port = 3000; let typeDefs: any = [` type Query { hello: String } type Mutation { hello(message: String) : String } `]; let helloMessage: String = 'World!'; let resolvers = { Query: { hello: () => helloMessage }, Mutation: { hello: (_: any, helloData: any) => { helloMessage = helloData.message; return helloMessage; } } }; app.use( '/graphql', graphqlHTTP({ schema: makeExecutableSchema({typeDefs, resolvers}), graphiql: true }) ); app.listen(port, () => console.log(`Node Graphql API listening on port ${port}!`));
私たちがしていることは:
OK、でもtypeDefとリゾルバー、そしてクエリとミューテーションとの関係はどうなっているのでしょうか?
さあ、走りましょう 海抜スタート もう一度、そこに何があるかを確認します。アプリは次のメッセージで実行されると予想されます。ポート3000でリッスンしているNodeGraphql API!
これで、次の方法で独自のサーバーでGraphQLAPIのクエリとテストを試みることができます。 http:// localhost:3000 / graphql
これで、「こんにちは」として定義された最初の独自のクエリを作成できます。
C ++またはCを学ぶ
typeDefs
で定義した方法で、このページはクエリの作成に役立つことに注意してください。
それは素晴らしいことですが、どうすれば値を変更できますか?突然変異!
それでは、メモリ内の値をミューテーションで変更するとどうなるか見てみましょう。
諮問委員会メンバーへの報酬
これで、GraphQL Node.jsAPIを使用して基本的なCRUD操作を実行できます。それでは、コードを進めましょう。
製品については、productsというモジュールを使用します。この記事を簡略化するために、デモンストレーションのためだけにインメモリデータベースを使用します。製品を管理するためのモデルとサービスを定義します。
私たちのモデルは次のように基づいています:
export class Product { private id: Number = 0; private name: String = ''; private description: String = ''; private price: Number = 0; constructor(productId: Number, productName: String, productDescription: String, price: Number) { this.id = productId; this.name = productName; this.description = productDescription; this.price = price; } }
GraphQLと通信するサービスは、次のように定義されます。
export class ProductsService { public products: any = []; configTypeDefs() { let typeDefs = ` type Product { name: String, description: String, id: Int, price: Int } `; typeDefs += ` extend type Query { products: [Product] } `; typeDefs += ` extend type Mutation { product(name:String, id:Int, description: String, price: Int): Product! }`; return typeDefs; } configResolvers(resolvers: any) { resolvers.Query.products = () => { return this.products; }; resolvers.Mutation.product = (_: any, product: any) => { this.products.push(product); return product; }; } }
ユーザーの場合、製品モジュールと同じ構造に従います。ユーザー向けのモデルとサービスをご用意します。モデルは次のように定義されます。
export class User { private id: Number = 0; private firstName: String = ''; private lastName: String = ''; private email: String = ''; private password: String = ''; private permissionLevel: Number = 1; constructor(id: Number, firstName: String, lastName: String, email: String, password: String, permissionLevel: Number) { this.id = id; this.firstName = firstName; this.lastName = lastName; this.email = email; this.password = password; this.permissionLevel = permissionLevel; } }
その間、私たちのサービスは次のようになります:
const crypto = require('crypto'); export class UsersService { public users: any = []; configTypeDefs() { let typeDefs = ` type User { firstName: String, lastName: String, id: Int, password: String, permissionLevel: Int, email: String } `; typeDefs += ` extend type Query { users: [User] } `; typeDefs += ` extend type Mutation { user(firstName:String, lastName: String, password: String, permissionLevel: Int, email: String, id:Int): User! }`; return typeDefs; } configResolvers(resolvers: any) { resolvers.Query.users = () => { return this.users; }; resolvers.Mutation.user = (_: any, user: any) => { let salt = crypto.randomBytes(16).toString('base64'); let hash = crypto.createHmac('sha512', salt).update(user.password).digest('base64'); user.password = hash; this.users.push(user); return user; }; } }
念のため、ソースコードはこちらから使用できます リンク 。
これで、コードを再生してテストできます。 npm start
を実行しましょう。サーバーはポート3000で実行されます。これで、GraphQLにアクセスしてテストできます。 http:// localhost:3000 / graphql 。
ミューテーションを試して、商品リストにアイテムを追加してみましょう。
それが機能するかどうかをテストするために、製品のクエリを使用しますが、受信するのはid
、name
、およびprice
のみです。
query{ products{ id, name, price } } The response will be: { 'data': { 'products': [ { 'id': 100, 'name': 'My amazing product', 'price': 400 } ] } }
以上です;製品は期待どおりに機能しています。これで、必要に応じてフィールドを再生したり切り替えたりできます。説明を追加してみてください。
query{ products{ id, name, description, price } }
これで、製品の説明を取得できます。今すぐユーザーを試してみましょう。
mutation{ user(id:200, firstName:'Marcos', lastName:'Silva', password:'amaz1ingP4ss', permissionLevel:9, email:' [email protected] ') { id } }
そして、クエリは次のようになります。
query{ users{ id, firstName, lastName, password, email } }
次のような応答で:
{ 'data': { 'users': [ { 'id': 200, 'firstName': 'Marcos', 'lastName': 'Silva', 'password': 'kpj6Mq0tGChGbZ+BT9Nw6RMCLReZEPPyBCaUS3X23lZwCCp1Ogb94/oqJlya0xOBdgEbUwqRSuZRjZGhCzLdeQ==', 'email': ' [email protected] ' } ] } }
これで、GraphQLスケルトンの準備が整いました。ここから、便利で完全に機能するAPIに向けて多くのステップがありますが、基本的なコアが設定されました。
短縮するための最先端であっても、この記事は非常に大きく、GraphQL Node.jsAPIの開発に関する基本的な情報がたくさんあります。
これまでに取り上げた内容を確認しましょう。
物事の開発面にさらに焦点を合わせるために、以下のように簡単に要約できるいくつかの重要な項目を避けました。
このGitには完全なソースコードがあることを忘れないでください リンク 。気軽に使用、フォーク、未解決の問題、プルリクエストの作成、そしてそれで遊んでください!この記事で行われたすべての基準と提案が石に刻まれているわけではないことに注意してください。
これは、独自のGraphQLAPIの設計を開始するために使用できる多くのアプローチの1つにすぎません。また、GraphQLをより詳細に読んで探索し、GraphQLが提供するものと、APIをさらに改善する方法を学習してください。
VisualStudioビルドiOSアプリ
GraphQLは、クライアントAPIおよびそれらのクエリを実行するサーバー側ランタイムのクエリ言語として定義されています。とはいえ、GraphQLは正確には言語ではありませんが、独自の構文があり、Node.jsなどのいくつかのプログラミング言語内で開発できます。
GraphQLは、要求を行い、クライアントが実際に消費する必要があるものをフィルタリングするためにクライアントの使用を簡素化し、サーバー側からクライアント側に余分なデータが渡されるのを防ぎます。これはRESTの優れた代替手段ですが、RESTとともに使用することもできます。
Node.jsは、JavaScript構文を使用してバックエンドサーバーを開発できるようにするクロスプラットフォームのJavaScriptランタイム環境です。ソフトウェアエンジニアがバックエンド(node.js)とフロントエンド(AngularやReactなど)の両方でJavaScriptを使用してコーディングできる場合、開発速度を向上させることができます。
Node.jsは、過去数年間、非常に安定していて高速であることが証明されています。マルチタスクに適しており、Chromeで使用されるV8エンジンで動作します。