GraphQL Github API-Formatierung

Question

Ich frage mich, wie mit dem folgenden Problem umzugehen. Ich verwende GraphQL den v4 Github API mit der folgenden Abfrage abzufragen:

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

Das wird mir eine Antwort, die wie so aussieht:

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

Ich bin ziemlich neu in GraphQL, ich verstehe, dass in meine Frage ich brauche die Kanten und Knoten zu schaffen, aber ich würde eher eine Antwort auf diese Art und Weise erhalten, weil ich über „Kanten“ und „Knoten“ in meinem Frontend bin nicht daran interessiert zu wissen:

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

I Ich schätze Diese Art von Antwort ist für GraphQL normal, aber es wäre ziemlich umständlich, die Antwort für die leichtere Verwendung in meinem Frontend ständig neu zu schreiben. Gibt es eine Möglichkeit, die "Kanten" und "Knoten" zu emittieren und die Formatierung zu erhalten, die ich möchte, oder liegt es an mir, damit umzugehen?

Ich habe mir einige Bibliotheken wie Apollo angeschaut, aber ich habe keine Ahnung, ob dies ein Recht ist, mit solchen Dingen umzugehen. Hoffentlich könnte jemand, der etwas mehr Erfahrung mit GraphQL hat, mir mehr erzählen.

Answer 1

In manchen Fällen bietet Services zwei Endpunkte: Relay-Endpunkt (mit Kanten und Knoten) und einfacher Endpunkt.

Sieht aus, als hätte GitHub nur einen Relay-Endpunkt. In diesem Fall können Sie nur die Antwort auf Ihrem Frontend manuell formatieren.

Tatsächlich ist solch eine komplexe Antwortstruktur erforderlich, da wir oft eine Paginierung durchführen müssen. Werfen Sie einen Blick auf das Beispiel:

{ 
    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 auf dem gleichen Niveau wie edges befindet.

Wenn Sie also später eine Seitennummerierung durchführen müssen, wäre es besser, das Antwortformat unverändert zu lassen.

Answer 2

Sie können die Abfrage edges entfernen, wenn Sie wissen, dass Sie nicht in diesen Beziehungen suchen. Cursor-basierte Paginierung funktioniert, indem Sie den pageInfo Wert hasNextPage und mit endCursor als after Abfrageparameter:

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

kehrt

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