Apollo+Expressで始めるGraphQL超入門 ~ データ取得Lv1

あらすじ

1.Apollo+Expressで始めるGraphQL超入門 ~ GraphQLをざっくり理解する

はじめに

前回の続きをやっていきます。
そのため使用するソースや環境構築は あらすじ を参照してくだい。

今回はデータの取得について色々書いていこうと思います。

※ 筆者はまだまだ初心者です。間違った解釈や実装などがあればご指摘お願いします。

Select

GraphQLは、必要なときに必要なものを取得することできます。
いらないデータは指定しなければ取得されません。

type User {
  id: Int
  name: String
  age: Int
  created_date: String
}

Userに対して id と name があればOKであればクエリにそう書きましょう。

{
  users {
    id
    name
  }
}

SQLのSELECTみたいな感じですね。

Limit

実装

app.js

const typeDefs = gql`
  type User {
    id: Int
    name: String
    age: Int
    created_date: String
  }
  type Query {
-   users: [User]
+   users(limit: Int): [User]
  }
`;

typeDefs の Queryの users に対して引数を設定します。
limit は数字がくるように設定しました。

app.js

const resolvers = {
  Query: {
-   users: () => users
+   users: (parent, args) => {
+     let result = users;
+     let limit = args.limit || null;
+
+     if (limit) {
+       result = result.slice(0, limit);
+     }
+
+     return result
+   }
  }
};

resolvers の Query に引数が渡るように設定しました。
args に引数が代入されます。
あとは、渡された limit の数字に沿って処理を行うだけです。

※ コードの書き足しを行ったらnodeタスクを再起動してください

実行

{
  users(limit: 3) {
    id
    name
  }
}

Limit Done!

Sort

Users を年齢でソートかけてみましょう。

年齢の降順、昇順が行えるように設定します。

実装

app.js

const typeDefs = gql`
  type User {
    id: Int
    name: String
    age: Int
    created_date: String
  }
  type Query {
    users: [User]
-   users(limit: Int): [User]
+   users(limit: Int, age_sort:String): [User]
  }
`;

age_sort という引数を足しました。 String 型で DESC か、 ASC が指定される想定です。

app.js

const resolvers = {
  Query: {
   users: () => users
   users: (parent, args) => {
     let result = users;
     let limit = args.limit || null;
+    let age_sort = args.age_sort || "";
+
+    if (age_sort) {
+      const ope = age_sort === 'ASC' ? 1 : -1;
+      result = users.sort((x, y) => {
+        if (x['age'] > y['age']) return ope;
+        if (x['age'] < y['age']) return -(ope);
+        return 0;
+      })
+    }

     if (limit) {
       result = result.slice(0, limit);
     }

     return result
   }
  }
};

これで年齢ソートができるようになります。

しかし、age_sortの引数に DESC, ASC 以外の文字列が設定されたらどうでしょう。
正しく処理が行えなくなってしまいます。

そこで新しい概念として enum を使ってみましょう。

enum とは TypeScriptで例えるとわかりやすいのですが

age_sort: "DESC" | "ASC";

指定した文字列のみに制限することができます!

enumの場合だとこのような書き方となります。

enum SortOP {
  ASC
  DESC
}

指定したい文字列が決まっている場合は enum を使ったほうが圧倒的にわかりやすくメンテしやすいコードになりますので、
こちらを使うことをおすすめします。

それでは enum で実装し直してみます。

const typeDefs = gql`
  type User {
    id: Int
    name: String
    age: Int
    created_date: String
  }
+ enum SortOP {
+   ASC
+   DESC
+ }
  type Query {
-   users(limit: Int, age_sort:String): [User]
+   users(limit: Int, age_sort:SortOP): [User]
  }
`;

これで age_sort には ASC, DESC が設定されるように型定義しました。

実行

{
  users(age_sort: DESC) {
    name
    age
  }
}

ソートすることができました。

Sort & Limit

もちろん、SortとLimitを組み合わせて使うこともできます。

{
  users(age_sort: DESC, limit: 2) {
    name
    age
  }
}

まとめ

簡単な取得系処理を実装してみました。
実際にやってみると、すごく自由度が高いという感想と、処理を足していくうちにどんどん肥大化していくんじゃないか？などいろいろと思うことがありました。
その部分を解消できる方法も調べてみたいと思います。

次回もう少し難易度を上げた データ取得Lv2 に続きます！