DEV Community

kaede
kaede

Posted on

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)