GraphQL Github APIの書式設定

Question

次の問題に対処する方法が不思議です。私は次のクエリでV4のGithub APIを照会するGraphQLを使用しています：

{ 
    viewer { 
    repositories(first: 30) { 
     edges { 
     node { 
      name 
     } 
     } 
    } 
    } 
} 

は、これは私にそうように見えます応答を取得：

{ 
    "data": { 
     "viewer": { 
      "repositories": { 
       "edges": [ 
        { 
         "node": { 
          "name": "test-repo" 
         } 
        }, 
        { 
         "node": { 
          "name": "another-repo" 
         } 
        } 
       ] 
      } 
     } 
    } 
} 

を私はGraphQLにかなり新しいです、私がいることを理解して私は、エッジおよびノー​​ドを提供する必要がありますが、私は私のフロントエンドでの「エッジ」と「ノード」について知って興味がないので、私はむしろ、帰りのこの種のレスポンスを得るでしょう、私のクエリ：

{ 
    "data": { 
     "viewer": { 
      "repositories": [ 
        { 
         "name": "test-repo" 
        }, 
        { 
         "name": "another-repo" 
        } 
       ] 
      } 
     } 
    } 
} 

I推測しているこのような応答はGraphQLにとっては正常ですが、私のフロントエンドで使いやすくなるように、常に応答に書き換えるのはかなり面倒です。 "エッジ"と "ノード"を放出し、私が望むフォーマットを得るための方法はありますか？

私はApolloのようないくつかの図書館を見てきましたが、これはこのようなことに対処するのに適しているのか分かりません。うまくいけば、GraphQLでもう少し経験のある人が私にもっと何かを教えてくれるでしょう。

Answer 1

サービスによっては、リレーエンドポイント（エッジとノードを含む）と単純なエンドポイントという2つのエンドポイントが提供されることもあります。

GitHubのように見えるのは、リレーエンドポイントだけです。この場合は、フロントエンドで手動で応答をフォーマットするしかありません。

実際、ページネーションを頻繁に行う必要があるため、複雑なレスポンス構造が必要です。例を見てみましょう：

{ 
    getArticle(id: "some-id") { 
     id 
     userId 
     user { 
      id 
      name 
     } 
     tags(first: 10, after: "opaqueCursor") { 
      edges { 
       node { 
        id 
        name 
        itemsCount 
       } 
      } 
      pageInfo { 
       hasNextPage 
       hasPreviousPage 
       endCursor 
       startCursor 
      } 
     } 
    } 
} 

pageInfoはedgesと同じレベルに位置しています。

ページングを後で行う必要がある場合は、そのまま応答形式を保持する方がよいでしょう。

Answer 2

これらの関係に基づいて検索していないことがわかっている場合は、edgesクエリを削除できます。カーソルベースのページネーションはpageInfo値hasNextPageをチェックしafterクエリパラメータとしてendCursorを使用して動作します：

viewer { 
     repositories(first: 30,after:"<CURSOR_STRING>") { 
     totalCount 
     pageInfo{ 
      hasNextPage 
      endCursor 
     } 
     nodes{ 
      name 
     } 
     } 
    } 

リターンを

"viewer": { 
    "repositories": { 
    "totalCount": 38, 
    "pageInfo": { 
     "hasNextPage": true, 
     "endCursor": "Y3Vyc29yOnYyOpHOAl/5mw==" 
    }, 
    "nodes": [ 
     { 
     "name": "AllStarRoom" 
     }, 
     { 
     "name": "shimsham" 
     }, 
     { 
     "name": "Monitor-Docs" 
     } 
    ] 
    } 
}