GraphQL APIの公開

概要

OpenAPI-to-GraphQL moduleモジュールは、 OpenAPIの仕様で説明されている、既存のREST APIのGraphQLラッパーを作成します。このチュートリアルでは、既存のLoopBackアプリケーションでGraphQL APIを公開する方法を示します。

前提条件

実行中のLoopBack 4アプリケーションがあることを確認してください。このチュートリアルでは、 todo 例を使用します。以下のコマンドを実行して、このアプリケーションを作成できます。

lb4 example todo

OpenAPI-to-GraphQL・その他必要な依存関係のインストール

LoopBackアプリケーションから次のコマンドを実行して、OpenAPI-to-GraphQLと必要な依存関係をインストールします。

npm i --save openapi-to-graphql-cli

GraphQLサーバーの起動

http://localhost:3000/openapi.jsonにアクセスして、LoopBackアプリケーションが実行されていることを確認します。実行されていない場合は、npm start コマンドを実行して起動できます 。

ここで、OpenAPI-to-GraphQL CLIを使用して、ポート3001でExpressによってバックアップされたGraphQL HTTPサーバーをセットアップします。todo-applicationによって生成されたOpenAPI仕様をパラメーターとして指定し、次のコマンドを実行して、サーバーを起動します。

npx openapi-to-graphql --port=3001 http://localhost:3000/openapi.json

npx について馴染みがないでしょうか。npm とNode.js 8.x以降から提供される、便利なヘルパーです。詳細については、Introducing npx: an npm package runnerをご参照ください。

完了です！これで、http：// localhost：3001 / graphqlのブラウザで、いくつかのテストとリクエストを試す準備ができました。

GraphQL APIsを試してみましょう

まず、query と mutation呼び出しの例を示します。

1. 全てのタスクインスタンスを取得するには、次のクエリコマンドを実行します。

   query{
     todos {
       id
       title
       desc
     }
   }
   

   予想される出力は、次のようになります。

   {
     "data": {
       "todos": [
         {
           "id": 1,
           "title": "Take over the galaxy",
           "desc": "MWAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA"
         },
         {
           "id": 2,
           "title": "destroy alderaan",
           "desc": "Make sure there are no survivors left!"
         },
         {
           "id": 3,
           "title": "play space invaders",
           "desc": "Become the very best!"
         },
         {"id": 4, "title": "crush rebel scum", "desc": "Every.Last.One."}
       ]
     }
   }
   

2. 次のミューテーションコマンドを使用して、to-doインスタンスを作成し、応答オブジェクトでそのIDとタイトルを取得します。

   mutation {
     todoControllerCreateTodo(newTodoInput: {
       title: "Take over the universe"
     }) {
       id
       title
     }
   }
   

   予想される出力は、次のようになります。

   {
     "data": {
       "todoControllerCreateTodo": {
         "id": 5,
         "title": "Take over the universe"
       }
     }
   }