Zenn
🌊

GraphQLへクエリでデータ取得

2022/07/08に公開
GraphQL
tech

はじめに

  • GraphQLは「クエリ言語(フロント側、リクエスト)」「スキーマ言語(サーバ側、レスポンス)」の2つによって構成される。
  • GraphQLを利用するにあたり、まずはクライアント側から必要なデータを取得できるようにクエリ言語の書き方を学習する。なにはともあれ、API経由でデータを取得する。

GitHub Explorerでクエリ発行

https://docs.github.com/ja/graphql/overview/explorer

  • 最初に以下のクエリが記載されている。Documentより該当のフィールドを確認する。
  • 出力するフィールドを指定することで、必要な情報のみ取り出すことが可能となる。
query { 
  viewer { 
    login
  }
}

viewer: User!
The currently authenticated user.
-> viewerフィールドはデータ型Userであり、必ず存在する。

login: String!
The username used to login.
-> データ型Userが持つloginフィールドのデータ型はStringであり、必ず存在する。その値をクエリ出力している。

  • 引数のフィルター条件を指定して、クエリ出力。
query { 
  user(login: "hiroharu8864") { 
    login
  }
}

user(login: String!): User
Lookup a user by login.
-> 引数のフィルター条件に指定したログインユーザのuserフィールドはデータ型Userあり、必ず存在する。前項と同様にデータ型Userが持つloginフィールドを取得する。

Relay Server Specification

  • 「1」対「多」のオブジェクト間の関係をNodeとEdgeで表現する。
  • 各子ノードの集合が親ノードにコネクトされている。
  • GitHubのGraphQL APIでは、仕様準拠した以下のフィールドを持つ。
  • 親ノードrepositoryOwnerは子ノードへのコネクトを表す型(RepositoryConnection型)を持つ。
  • repositories(RepositoryConnection型):コネクトを表す型
    • edges(RepositoryEdge型)
      • cursor:接続位置を表す一意のID
      • node:edge経由で接続されているNodeの実体
    • pageInfo(PageInfo型)
      • hasNextPage
      • hasPreviousPage
      • startCursor
      • endCursor
    • nodes(Repository型)(仕様ではなく、実際のリポジトリ情報)

GitHub Explorerで深い階層までクエリ発行

  • 自身のリポジトリのリポジトリ名と作成日時の一覧を取得する。
  • 最初の内は、階層構造とクエリの紐付けに慣れること。

query { 
  repositoryOwner(login: "hiroharu8864") { 
    repositories(privacy: PUBLIC, first: 100) {
      nodes {
        createdAt
        name
      }      
    }
  }
}
  • edgeから子ノードを辿り取得するほうが、Relay Server Specification的。
query { 
  repositoryOwner(login: "hiroharu8864") { 
    repositories(privacy: PUBLIC, first: 100) {
      edges{
        node {
          createdAt
          name
        }
      }
    }
  }
}

所感

  • GraphQLを実装したSaaSサービスは増えてくると予測される。サーバ側の実装よりもクライアント側のクエリの実装に重きをおく。クライアント側の情報はあまりない。
  • GraphQL APIから元データを取得して、BIツールへ転送等のユースケースを想定し、複数のデータ取得クエリを書いてみる。
    • 1ヶ月分のオブジェクトのデータを取得するとか。
    • オブジェクトAとオブジェクトBからデータ取得し、いい感じに成形する等。複雑なクエリを実装する分、実現できることは増える。
  • HTTP経由で外部からAPI呼び出しできるテストAPIがあれば良いな。(ないかな、、)
    • GitHubでも実施できるが、アクセストークンの発行が必要となるため、CodeSandbox経由でコード書けないのが、困ってる。

Discussion