下記でGraphQLを確認できる
https://docs.github.com/en/graphql/overview/explorer
①Prettifyの意味は、押すとコメントアウトや不要なものを消してくれる。
②queryのあとのfetchViewerは、オペレーションネーム。
query fetchViewer {
viewer {
login
}
}
検証でみたときに、
オペレーションネームを入力するとRequest payloadにも出てくる。
requestのところにはjsonデータが出ている。
③同じものはそのままだとエラーになる。
下記のようにアカウントは違うが同じ方法でデータを取ることはできない。
{
user(login: "business1") {
bio
login
}
user(login: "business2") {
bio
login
}
}
なので、エイリアス（別名）をつける
例えば、user1とuser2にしたりする
下記のようにする。
{
user1: user(login: "business1") {
bio
login
}
user2: user(login: "business2") {
bio
login
}
}
④フラグメントで一気に効率化
③のようにbioとloginのように共通するフィールドを取るときにフラグメントを使って記述を一つで済ませることができる。
...でフラグメントを展開できる。
{
user1: user(login: "business1") {
...commonFields
}
user2: user(login: "business2") {
...commonFields
}
}
fragment commonFields on User {
bio
login
}
⑥オペレーションネーム
下記のようにqueryの横にオペレーションネームを
加えると実行したときにどちらのqueryを実行するか選べる。
query getUser1 {
user(login: "businessryuya") {
bio
}
}
query getUser2 {
user(login: "ryuyamatsuzawa") {
bio
}
}
⑥variables(変数)
下記のようにQUERY VARIABLESに入力すれば上のuser(login:$login)として、queryの次に型を定義すればよい。
⑦ mutation
queryではデータの削除や更新はできません。
mutationではそれが出来ます。
ちなみに下記のような!は必須という意味である。
starrableId: ID!
書き方は下記のような感じで、まず必要な情報をqueryで確認してその後にmutationを作成していく。
query repogitory{
repository(owner: "gipcompany",name: "udemy-react-redux-crud-application") {
id
name
url
}
}
mutation addStar {
addStar(input: {starrableId: "MDEwOlJlcG9zaXRvcnkxMjM5NTA3MjU="}) {
starrable {
id
viewerHasStarred
}
}
}
⑧インラインフラグメント
... on Userの意味はnodesの中のUserを展開するという意味。
query search {
search(query: "we work hard", type:USER, first:2) {
nodes {
... on User{
id
name
url
}
... on Organization{
id
name
url
projectsUrl
}
}
}
}
しかしもしprojectsUrlを無くした場合全く同じなのでどっちがどっちの返ってきたやつかわからない。なので__typenameを使う。これを使うとどっちかわかるようになる
⑨型などの説明
GitHub GraphQL APIでDocsを開いたときに下記のような黄色の文字は型である。
例えば、下記のようなStringはスカラー型と言われて、これ以上分解できない型のことをいう。
逆に下記のUserは分解できる型である。
スカラーはどれかわからない場合は下記のサイトでどれがスカラーか載っている。
https://spec.graphql.org/June2018/#sec-Scalars
⑩pagination
Relay-style cursor paginationの説明。
git hubでも採用されている。
最も実装に用いられている。
例として下記のような感じ。
Docsから確認しながら書いています。
query searchRepositories($first: Int, $after: String, $last:Int, $before:String,$query:String!) {
search(first: $first, after:$after, last:$last, before:$before, query:$query,type: REPOSITORY) {
repositoryCount
pageInfo{
endCursor
hasNextPage
hasPreviousPage
startCursor
}
edges{
cursor
node{
... on Repository{
id
name
url
}
}
}
}
}
下記はquery variables
{
"after": null,
"before": null,
"first": 2,
"last": null,
"query": "フロントエンジニア"
}