🔍

俺でもわかるGraphQLでサーチ(2)

2 min read

はじめに

前回はTodoをリスト表示するところまででした。今回は特定のTodoをidでサーチして取得してみます。

コード

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]
    task(id: ID!): Task # ❶
  }
`;

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

const resolvers = {
  Query: {
    tasks: () => tasks,
    task (parent, args, context, info) { // ❷
      const { id } = args;
      return context.db.find((task) => task.id == id)
    }
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: { db: tasks } // ❸
});

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

変更点は以下の3つ:

  1. IDを引数にとるQueryを追加
  2. ❶に対応するresolverとしてtaskを追加。ここにtasksの配列をidで検索する処理を追加
  3. contextにdbとしてtasksを登録。❷での検索はtasks.find()としても同じように動くが、dbはcontextに入れるのがapollo流みたいなのでやってみた。今回はin-memoryの配列なので、find()している。これがRDBだとcontext.db.query('SELECT * FROM table_name');みたいになったりするわけかな

クエリー

当初のこのリストに加えて

{
  tasks {
    id
    name
  }
}

id指定のクエリができるようになりました

{
  task(id: 2){
    id
    name
  }
}

リターンは

{
  "data": {
    "task": {
      "id": 2,
      "name": "Sing Karaoke",
      "isActive": false
    }
  }
}

なるほど、開発サイクルも大体わかってきたぞ。こんな風にSchema更新→Resolver更新を繰り返すんだな。ネーミングはtaskとかtasksとかとりあえずRESTと同じ感じでいっとこう。

次回

次回はTodoの追加、削除、更新かな

参考

https://www.apollographql.com/blog/graphql-search-and-filter-how-to-search-and-filter-results-with-graphql/

シリーズ