GraphQL Github API 格式化

Posted 2023-03-08

【中文标题】GraphQL Github API 格式化

【英文标题】：GraphQL Github API formatting

【发布时间】：2018-04-11 11:44:24

【问题描述】：

我想知道如何处理以下问题。我正在使用 GraphQL 通过以下查询查询 v4 Github API：

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

我猜这种响应对于 GraphQL 来说是正常的，但是为了在我的前端更容易使用而一直重写响应会非常麻烦。有没有办法发出“边缘”和“节点”并获得我想要的格式，或者这完全取决于我来处理？

我查看了一些库，例如 Apollo，但我不知道这是否适合处理此类事情。希望对 GraphQL 更有经验的人可以告诉我更多信息。

【参考方案1】：

如果您知道自己没有沿着这些关系进行搜索，则可以删除 edges 查询。基于光标的分页将通过检查 pageInfo 值 hasNextPage 并使用 endCursor 作为 after 查询参数来工作：

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

【参考方案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 位于同一级别。

因此，如果您以后需要进行分页，最好保持响应格式不变。