Apollo Serverを使用してGraphQLサーバを起動する – 【GraphQL】

Apollo Serverを使用してGraphQLサーバを起動する – 【GraphQL】

GraphQLサーバを起動します。Apollo Serverを使用します。

プロジェクト作成とインストール

$ npm init -y
$ npm i @apollo/server graphql
$ touch server.mjs

v3とv4

apollo-serverはv3、@apollo/serverはv4のようです。

package.json

package.jsonのnpmスクリプトを以下にします。

  "scripts": {
    "start": "node server.mjs"
  }

server.mjs

server.mjsの中身です。

server.mjs

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

// schema
const typeDefs = `#graphql
  type Query{
    hi: String
    hello(name: String!): String
    bye(name: String!, message: String!): String
  }
`
// resolver
const resolvers = {
  Query: {
    hi: () => {return 'hi.'},
    hello: (p, a) => {
        return 'Hello World ' + a.name
    },
    bye: (p, a)=> a.message + ' ' + a.name
  }
}

const server = new ApolloServer({ typeDefs, resolvers });

const { url } = await startStandaloneServer(server);
console.log(`🚀 Server ready at ${url}`);

起動

npm run startでサーバ起動ができます。

http://localhost:4000/にアクセスします。

GraphQLのplaygroundにアクセスできます。この画面からhelloクエリを実行します。

helloクエリ

Qurery
query ExampleQuery($name: String!) {
  hello(name: $name)
}
Variables
{
  "name": "takahashi"
}
Response
{
  "data": {
    "hello": "Hello World takahashi"
  }
}

上記がブラウザでhelloクエリを実行したレスポンス結果です。

byeクエリ

次にbyeクエリを実行します。

Qurery
query Query($name: String!, $message: String!) {
  bye(name: $name, message: $message)
}
Variables
{
  "name": "takahashi",
  "message": "byebye"
}
Response
{
  "data": {
    "bye": "byebye takahashi"
  }
}

上記がブラウザでbyeクエリを実行したレスポンス結果です。

スキーマの種類

スキーマにはQuery、Mutation、Subscription、それと任意の名前のオブジェクトと言うスキーマが定義できます。

Query、Mutation、Subscriptionの3つは予め定義された特別なスキーマです。

フロントからfetchでデータ取得する

htmlファイルを作成してfetchして確認します。

test.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>test</title>
  </head>
  <script>
    async function load() {
      const response = await fetch("http://localhost:4000", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({
          query: `query($name: String!, $message: String!) {
            bye(name: $name, message: $message)
          }`,
          variables: {"name": "takahashi", "message": "bybybybyby"}
        })
      });
      const data = await response.json();
      document.getElementById('app').innerHTML = `${data.data.bye}`;

    }
    load();
  </script>
  <body>
    <div id="app"></div>
  </body>
</html>

ブラウザで開くと、byeクエリが実行されています。

curlコマンド

curlコマンドでPOSTしても確認できます。hiクエリを実行する例です。

C:\>curl -X POST -H "Content-Type: application/json" ^
  -d "{\"query\": \"{ hi }\"}" http://localhost:4000/

引数有になってくるとcurlは面倒なのでPOSTMANなどのツールでテストする方がよさそうです。

ドキュメント

apollo-server
Production ready GraphQL Server. Latest version: 3.13.0, last published: 2 months ago. Start using apollo-server in your...
@apollo/server
Core engine for Apollo GraphQL server. Latest version: 4.10.0, last published: 15 days ago. Start using @apollo/server i...
GraphQL Code Libraries, Tools and Services
A query language for your API — GraphQL provides a complete description of the data in your API, gives clients the power...

コメント

タイトルとURLをコピーしました