DEV Community

kaede
kaede

Posted on

GraphQL 内部定義した オブジェクトたちの配列を返すサーバーを立てる

#graphql

apollographql のチュートリアル通りに作る

https://www.apollographql.com/docs/apollo-server/getting-started/#step-1-create-a-new-project

ディレクトリの作成と npm init 

mkdir ~/source/gq2 cd ~/source/gq2 npm init --yes
Enter fullscreen mode Exit fullscreen mode

ディレクトリを作成して npm を初期化する

 "name": "gq2", "version": "1.0.0", "description": "", "main": "index.js",
Enter fullscreen mode Exit fullscreen mode

今回は private: true も type:module も入らなかった。

apollo-server と grapql の インストール 

npm install apollo-server graphql
Enter fullscreen mode Exit fullscreen mode

apollo-server と graphql をプロジェクトに入れる。

index.js で使うライブラリを apollo-server から require して、型定義を gql で typeDefs として作る。 

const { ApolloServer, gql } = require('apollo-server'); const typeDefs = gql` type Book { title: "String" author: String } type Query { books: [Book] } `;
Enter fullscreen mode Exit fullscreen mode

require を使って apollo-server から gql たちを import する

typeDefs に型定義として gql を使ってまずは必須の Root である Query
そこに title と author をもつ Book を結びつける。

index.js に実データのオブジェクトの配列の books を作る 

const books = [ { title: 'The Awakening', author: 'Kate Chopin', }, { title: 'City of Glass', author: 'Paul Auster', }, ];
Enter fullscreen mode Exit fullscreen mode

実データのオブジェクトの配列を作る。

index.js に query のリクエストが来た時の対応の resolvers を書く。 

const resolvers = { Query: { books: () => books, }, };
Enter fullscreen mode Exit fullscreen mode

リゾルバとして、books のクエリが来た時に books のオブジェクトを返すように組む。

ApolloServer を使って型定義とリゾルバをまとめ、csrf 防止と Cache Bounded をつける。 

const server = new ApolloServer({ typeDefs, resolvers, csrfPrevention: true, cache: 'bounded', });
Enter fullscreen mode Exit fullscreen mode

型定義とリゾルバをまとめ、csrf 防止と Cache Bounded をつける。

listen でサーバーを起動して、.then で起動後に url を読み取って console に出力する 

server.listen().then(({ url }) => { console.log(`🚀 Server ready at ${url}`); });
Enter fullscreen mode Exit fullscreen mode

これでサーバーを起動できる。

listen の中身では、普通に express の http server のスタートなどが組まれている。

実際に走らせて、ブラウザで確認する 

node index.js 🚀 Server ready at http://localhost:4000/
Enter fullscreen mode Exit fullscreen mode

Image description

開いているのを確認。

Image description

books の title だけをリクエストすると

2 つのデータのタイトルのみが

Image description

author もリクエストにつけると、
2 つのデータのタイトルも著者も

レスポンスとして返ってくるのが確認できた。

curl --request POST \ > --header 'content-type: application/json' \ > --url http://localhost:4000/ \ > --data '{"query":"query ExampleQuery { books { title, author }}"}' {"data":{"books":[{"title":"The Awakening","author":"Kate Chopin"},{"title":"City of Glass","author":"Paul Auster"}]}}
Enter fullscreen mode Exit fullscreen mode

curl で POST リクエストをしても
中身が返ってくるのを確認できた。

Top comments (0)