Apollo x GraphQLのinlineFragmentsと(インラインフラグメント)と__typename(タイプネーム)

inlineFragments_typename.md

Apollo x GraphQLのinlineFragmentsと(インラインフラグメント)と__typename(タイプネーム)

試す場合

• githubにログイン後

• https://developer.github.com/v4/explorer/

自分の情報取得

{
 user(login: "kenmori"){
     bio
   }
 }

fragment speadスプレッド

 {
   userOne : user(login: "kenmori"){
     bio
     ...commonFields
   }
 }

## top levelで書く
 fragment commonFields on User {
   login
 }

operation nameをつける(一度に要求できる無名クエリ。アノニマスオペレーションは一つでなければならない -> オペレーションネームをつける)

### error 
 {
   user(login: "kenmori"){
     bio
   }
}
{
   user(login: "kenmori2"){
     bio
   }
}

### fix

 query getUser1 {# operation name
   user(login: "kenmori"){
     bio
   }
 }
 query getUser2 {#operation name2
   user(login: "kenmori2"){
     bio
   }
 }

inlineFragmentsと(インラインフラグメント)と__typename(タイプネーム)

• inlineFragments・・・レスポンスを展開したい時 ...on Typename
• __typename・・・型名を明示的にしたい時 __typename

{
  search(query: "We work hard", type: USER, first: 2){
   nodes { # nodesは色々な型を返す場合。
     ... on User {#inline fragment。 この場合、Userの型の中のfiledをnodds直下に直接展開してくださいねというもの
      	id
      	name
    	}
     ... on  Organization {
       id
       name
       url
       projectsUrl # ここがあるからOrganizationの型だとわかるが、ない場合はどのnodeがどの型かを知らせてもらう必要がある
      #その場合に必要なのが__typename
     }
  	}
  }
}

# もしprojectsUrlとurlを外して要求すると...

# return data

{
  "data": {
    "search": {
      "nodes": [ 
        {
          "id": "MDQ6VXNlcjI5NTIxMTQz",
          "name": "oath"
        },
        {
          "id": "MDEyOk9yZ2FuaXphdGlvbjEyNjI0Njc1",
          "name": "WeFlex We Code"
        }
      ]
    }
  }
}

要求したフィールドが同じである為、どちらがOrganizationでどちらがUserわからなくなる。 それを避けるために、 型名を返してもらい明示的にする

{
  search(query: "We work hard", type: USER, first: 2) {
    nodes {
      __typename #ここで指定することでどの型で返ってきたものか明示的にする
      ... on User { #inline fragment Userの型の中のfiledをnodds直下のところに展開してくださいの意味。possibleTypes。
        id
        name
      }
      ... on Organization {
        id
        name
        url
        projectsUrl
      }
    }
  }
}

#return data

{
  "data": {
    "search": {
      "nodes": [
        {
          "__typename": "User",
          "id": "MDQ6VXNlcjI5NTIxMTQz",
          "name": "oath"
        },
        {
          "__typename": "Organization", #型名がはいるのでpropjectsUrlを要求しなかった時(keyが同じ場合もわかる)
          "id": "MDEyOk9yZ2FuaXphdGlvbjEyNjI0Njc1",
          "name": "WeFlex We Code",
          "url": "https://github.com/weflex",
          "projectsUrl": "https://github.com/orgs/weflex/projects"
        }
      ]
    }
  }
}