GraphQLについて

下記でGraphQLを確認できる
https://docs.github.com/en/graphql/overview/explorer

①Prettifyの意味は、押すとコメントアウトや不要なものを消してくれる。

②queryのあとのfetchViewerは、オペレーションネーム。
```
query fetchViewer {
  viewer {
    login
  }
}
```
検証でみたときに、

オペレーションネームを入力するとRequest payloadにも出てくる。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1350294/b7d6229f-139f-df44-22ce-e28959e14349.png)

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の次に型を定義すればよい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1350294/2125b245-2c5a-7b03-fe4d-6f7cc208877e.png)

⑦ 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を開いたときに下記のような黄色の文字は型である。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1350294/f2a50d0d-4a3d-a281-672f-d4f71c5c80cf.png)
例えば、下記のようなStringはスカラー型と言われて、これ以上分解できない型のことをいう。
逆に下記のUserは分解できる型である。
スカラーはどれかわからない場合は下記のサイトでどれがスカラーか載っている。
https://spec.graphql.org/June2018/#sec-Scalars

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1350294/c2449a0f-64ca-69ab-7ed9-8eee78e27a23.png)

⑩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": "フロントエンジニア"
}
```