🍣

俺でもわかるGraphQLでリスト表示（1）

2021/05/06に公開

GraphQL

JavaScript

Apollo

tech

はじめに

GraphQLの始め方は、この素晴らしい二つのサイトでコンセプトを掴むところからですね。

https://graphql.org/learn/
https://www.howtographql.com/

ただ、これに沿ってハンズオンを進めるとすぐに、データベースとかORMの設定が始まったりします。個人的には、そのあたりはもう少しGraphQLそのものを理解してからでもいいのではと思います。

GraphQLはせっかくそのコンセプトからデータベース実装への依存はないので、まずはシンプルにin-memoryのデータベースで動かしながら進めていきます。

最終的には、以前に作った以下のREST APIベースのTodoアプリをGraphQLに置き換えるところまでやってみようとおもいます。

インストール

mkdir todo
cd todo
npm init -y

npm install apollo-server

テンプレート

先の公式サイトをさっとみたら、Apolloを使って、以下をGraphQLサーバのテンプレートにしてスタートしましょう。

index.js

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
  type Task {
    id: ID!
    name: String!
    isActive: Boolean!
    createdAt: Int
    updatedAt: Int
    owner: String
  }

  type Query {
    tasks: [Task]
  }
`;

const tasks = [
  { id: 1, name: "Soak in an Onsen", isActive: true},
  { id: 2, name: "Sing Karaoke", isActive: true},
  { id: 3, name: "See cherry blossom", isActive: true},
]

const resolvers = {
  Query: {
    tasks: () => tasks,
  },
};

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`); 
});

サーバーを起動します！

node index.js
🚀  Server ready at http://localhost:4000/

クエリー

Todoをリスト表示するクエリを投げてみます。Queryのとおり、tasksの配列の中身を返すだけのシンプルなクエリです。

このクエリエディターはGraphQL Playgroundという名前のようだ。デフォルトでスキーマなども見れるし、キーワード補完も聞いていてかなり書きやすい。

cmd+/で複数選択した行を一括でコメントアウトできる（超便利）
複数のクエリを書いておいて、プレイボタンをクリックしてどのクエリ実行するか選べる（超便利）^[1]

次回

次回はTodoの検索かな

シリーズ

脚注

これに気づかず、常に一つのクエリになるようにコメントアウトを繰り返していたのは私です... ↩︎