なんでもノート

なんでも書くノートみたいなブログ

GraphQL Directiveを使って三項演算子

GraphQLのDirectiveという機能を使って三項演算子を再現する。

実行環境にはhttps://graphql.org/learn/queries/#directivesを使う(いつか動かなくなってしまうかもしれない)。

例ではwithFriends variableの真偽値を変えることによって、friends.nameを取得結果が変わることが確かめられる。

ここでqueryを以下のように書き換えてみる。

query Hero($episode: Episode, $withFriends: Boolean!) {
  hero(episode: $episode) {
    name
    friends @include(if: $withFriends) {
      name
    }
    appearsIn @skip(if: $withFriends)
  }
}

withFriendsをtrueにすると、friends.nameを取得することができる。

{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

withFriendsをfalseにすると、appersInを取得することができる。

{
  "data": {
    "hero": {
      "name": "R2-D2",
      "appearsIn": [
        "NEWHOPE",
        "EMPIRE",
        "JEDI"
      ]
    }
  }
}

これは以下のように三項演算子で組み立てるqueryと同じ動きをする。

const heroQuery = (withFriends: boolean) => `
query Hero($episode: Episode) {
  hero(episode: $episode) {
    name
    ${withFriends ? `friends { name }` : "appersIn"}
  }
}
`;

@include(if: Boolean), @skip(if: Boolean) Directiveを使って三項演算子のようにqueryを組み立てられることがわかった。直感的でわかりやすく、queryの組み立てをvariablesで制御できるので使っていきたい。