Winkel-4 und GitHub API GraphQL

In diesem momement ich habe so etwas wie, dass

return this._http.get('https://api.github.com/users/' + this.username + '/repos?client_id=' + this.client_id + '&client_secret=' + this.client_secret)
.map(res => res.json());

erhalten Sie eine Liste der Repositorys, die für den gewählten Benutzer (ohne GraphQL).

Wie kann ich eine Liste von Fragen, sondern durch die Verwendung GraphQL?
Hier ist ein Beispiel grom GitHub API-Dokumentation:

query {
  repository(owner:"octocat", name:"Hello-World") {
    issues(last:20, states:CLOSED) {
      edges {
        node {
          title
          url
          labels(first:5) {
            edges {
              node {
                name
              }
            }
          }
        }
      }
    }
  }
}

Wie kann ich es umsetzen, im Winkel 4?

InformationsquelleAutor EA_ | 2017-08-04



One Reply
  1. 4

    Gibt es mindestens zwei Möglichkeiten:

    • Mit GraphQL client wie apollo-angular
    • Abrufen von Daten von GraphQL-API über eine einfache HTTP-Anfrage

    Verwenden HTTP

    const query = `query {
      repository(owner:"octocat", name:"Hello-World") {
        issues(last:20, states:CLOSED) {
          edges {
            node {
              title
              url
              labels(first:5) {
                edges {
                  node {
                    name
                  }
                }
              }
            }
          }
        }
      }
    }`;
    
    this._http.get(LINK_TO_API + '?query=' + query);
    

    Verwenden apollo-angular

    https://github.com/apollographql/apollo-angular

    Apollo ist ein GraphQL client.

    Hier sind die docs:

    http://dev.apollodata.com/angular2/

    Beispiel:

    import { Apollo } from 'apollo-angular';
    import gql from 'graphql-tag';
    
    @Component({
        /* ... */
    })
    class UsersComponent implements OnInit {
    
        constructor(
            private apollo: Apollo
        ) {}
    
        ngOnInit() {
            //or this.apollo.watchQuery() - read the docs
            this.apollo.query({
                query: gql`
                    {
                        repository(owner: "octocat", name: "Hello-World") {
                            issues(last:20, states:CLOSED) {
                                edges {
                                    node {
                                        title
                                        url
                                        labels(first:5) {
                                            edges {
                                                node {
                                                    name
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                `
            }).subscribe(response => {
                console.log('data', response.data);
            });
        }
    }
    

    Einer Arbeit Beispiele:

    https://github.com/kamilkisiela/apollo-angular-reproduction/blob/master/client/app/post/post-list.component.ts

    https://github.com/apollographql/githunt-angular

    • Vielen Dank, aber ich habe nun einen Fehler. localhost:4200/graphql [HTTP/1.1 404 not Found (2 ms] Fehler FEHLER: Network error: Network-Anforderung ist fehlgeschlagen mit status 404 „Nicht Gefunden“
    • Sie müssen geben Sie eine richtige URL in der NetworkInterface

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.