GraphQL Github API 서식 지정

Question

다음 문제를 해결하는 방법을 궁금합니다.

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

이 나에게 같은 보이는 응답을 가져옵니다 : 나는 다음 쿼리와 V4 Github에서의 API 쿼리 GraphQL을 사용하고

{ 
    "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

때때로 서비스는 두 개의 끝점, 즉 중계 및 노드가있는 중계 끝점과 단순 끝점을 제공합니다.

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" 
     } 
    ] 
    } 
}