GraphQLのはろーわーるどくらいだけしてみた

https://www.apollographql.com/docs/apollo-server/

これ動かして、条件を自分で追加してみた、程度の話。

初手動かしてみた感想としては

まだサーバーサイド動かしてみただけなのですが

ブラウザ上でデバッグできるクライアントもついてるし便利だなぁと思った
DBなくてもメモリ上に構造データ展開しておけばそれっぽく使えるのもわかった
- Mock的にやるとか
- 本当に固定値のマスターとか
- そういうのと相性がいいのかもしれない？
- ただ本当の用途としてはDBとつないで、という感じにはなるはず
クライアントで指定したカラムだけとれるの面白い
いくつかドキュメント読み進めてみたけど、どこに何を書いていけばどう動くのか、というイメージがしづらめ
- ドキュメントに書いてある通りといえば書いてある通りだが、実際の開発プラクティスっぽい感じで学びたい
- そういう意味では実例ベースの書籍のほうが自分の学びの初手としてはマッチするのかも

やったこと

チュートリアルで書いてあるBookに対してprice(値段)を足してみて、それを絞り込むというのを自分の中の課題として設置して解いてみた。

構造的には

チュートリアルベースの知識しかないのでこんな感じに書いた。単純に price を足してみた形。クエリには数値引数が取れる形でsearchを定義した。

const typeDefs = `#graphql
  type Book {
    title: String
    author: String
    price: Int
  }

  type Query {
    books: [Book]
    search(min: Int): [Book]
  }
`;

const books = [
    {
        title: 'The Awakening',
        author: 'Kate Chopin',
        price: 1000,
    },
    {
        title: 'City of Glass',
        author: 'Paul Auster',
        price: 2000,
    },
];

クエリの部分は

searchの部分を追加してみた。引数 min を取るような関数を定義～とか思っていたが、どうやらそれが違っていた模様。

関数の定義パターンみたいなのは決まっていて、 args からとればよさそうだったのでそう書いてみた。（ Resolver のあたりにそう書いててあった https://www.apollographql.com/docs/apollo-server/data/resolvers/#handling-arguments 、最短で動かすことしか考えていないのでこれでいいのかはわからない）

const resolvers = {
    Query: {
        books: () => books,
        search: (parent, args, context, info) => books.filter((x) => x.price >= args.min),
    },
};

リクエストしてみる

http://localhost:4000/ を開いて、こんなのを送り付けてみると

query ExampleQuery {
  search(min: 1300) {
    title
    price
  }
}

こう返ってくる

{
  "data": {
    "search": [
      {
        "title": "City of Glass",
        "price": 2000
      }
    ]
  }
}

Bookでは Author も定義されているのに、title, price だけが取れるのめっちゃ面白いなと思いました。

この先とか

複雑な構造体を扱ってみたい
DBやキャッシュサーバーとつなげてみたい
実開発のそれっぽい構成を身に着けたい

上記の3つをゆるゆる進めていきたいです。