Üben Sie GraphQL -Abfragen mit dem Status der JavaScript -API

Das Erstellen des Erstellens von GraphQL -APIs kann eine große Herausforderung sein. Sie können jedoch lernen, wie Sie GraphQL -APIs in 10 Minuten verwenden ! Und es passiert, dass ich die perfekte API dafür habe: den brandneuen, frischen Stand der VS-Code-Status der JavaScript-GraphQL-API.

Die Umfrage des Bundesstaates JavaScript ist eine jährliche Umfrage der JavaScript -Landschaft. Wir machen es seit vier Jahren und die jüngste Ausgabe erreichte über 20.000 Entwickler.

Wir haben uns immer darauf verlassen, dass Gatsby unsere Showcase -Site aufgebaut hat, aber bis zu diesem Jahr haben wir unsere Daten in Form statischer YAML -Dateien an Gatsby gefüttert, die durch eine Art arkaner Magie erzeugt wurden, die bloße Sterbliche als „Elasticsarch“ bekannt sind.

Aber da Gatsby alle Datenquellen auspackt, die es sowieso als GraphQL isst, können wir den Mittelsmann genauso gut überspringen und ihn direkt füttern! Ja, ich weiß, diese Metapher wird zum zweiten Mal Grosser und ich bereue sie bereits. Mein Punkt ist: Wir haben eine interne GraphQL -API für unsere Daten erstellt, und jetzt stellen wir sie allen zur Verfügung, damit auch Sie den Datensatz problemlos ausnutzen können!

"Aber warte", sagen Sie. "Ich habe mein ganzes Leben damit verbracht, die Klinge zu studieren, die mir keine Zeit geblieben hat, GraphQL zu lernen!" Keine Sorge: Hier kommt dieser Artikel ins Spiel.

Was ist GraphQL?

Im Kern ist GraphQL eine Syntax, mit der Sie angeben können, welche Daten Sie von einer API erhalten möchten. Beachten Sie, dass ich API sagte und nicht die Datenbank. Im Gegensatz zu SQL geht eine GraphQL -Abfrage nicht direkt zu Ihrer Datenbank, sondern zu Ihrem GraphQL -API -Endpunkt, der wiederum eine Verbindung zu einer Datenbank oder einer anderen Datenquelle herstellen kann.

Der große Vorteil von GraphQL gegenüber älteren Paradigmen wie Ruhe besteht darin, dass Sie nach dem, was Sie wollen, fragen können. Zum Beispiel:

 Abfrage {
  Benutzer (ID: "foo123") {
  Name
 }
}

Würde Ihnen ein Benutzerobjekt mit einem einzelnen Namensfeld erhalten. Benötigen Sie auch die E -Mail? Nur tun:

 Abfrage {
 Benutzer (ID: "foo123") {
  Name
  E-Mail
 }
}

Wie Sie sehen können, unterstützt das Benutzerfeld in diesem Beispiel ein ID -Argument. Und jetzt kommen wir zur coolsten Funktion von GraphQL, Nesting:

 Abfrage {
 Benutzer (ID: "foo123") {
  Name
  E-Mail
    Beiträge { 
      Titel
      Körper
    }
  }
}

Hier sagen wir, dass wir die Beiträge des Benutzers finden und ihren Titel und ihren Körper laden möchten. Das Schöne an GraphQL ist, dass unsere API -Ebene die Arbeit erledigen kann, herauszufinden, wie diese zusätzlichen Informationen in diesem spezifischen Format abgerufen werden können, da wir nicht direkt mit der Datenbank sprechen, auch wenn sie nicht in einem verschachtelten Format in unserer tatsächlichen Datenbank gespeichert ist.

Sebastian Scholl erklärt GraphQL, als ob Sie es zum ersten Mal bei einem Cocktailmixer getroffen hätten.

Einführung von Grafikl

Graphiql (beachten Sie das „I“ in dort) ist die häufigste Graphql -IDE da draußen und es ist das Tool, mit dem wir den Status der JavaScript -API untersuchen werden. Sie können es jetzt unter graphiql.stateofjs.com starten und es wird automatisch eine Verbindung zu unserem Endpunkt hergestellt (das ist api.stateofjs.com/graphql). Die Benutzeroberfläche besteht aus drei Hauptelementen: dem Explorer -Panel, dem Query Builder und den Ergebnisplatten. Wir werden später die DOCS -Panels dazu hinzufügen, aber lassen Sie es uns vorerst einfach halten.

Die Registerkarte "Explorer" ist Teil einer von Turbo gesteuerten Version von Graphiql, die von OneGraph entwickelt und gepflegt wird. Vielen Dank an sie, dass sie uns geholfen haben, es zu integrieren. Schauen Sie sich das Beispiel Repo an, wenn Sie Ihre eigene GraphiQL -Instanz bereitstellen möchten.

Mach dir keine Sorgen, ich werde dich noch nicht dazu bringen, Code zu schreiben. Beginnen wir stattdessen von einer vorhandenen GraphQL -Abfrage, wie derjenigen, die der Entwicklererfahrung mit React in den letzten vier Jahren entspricht.

Erinnern Sie sich, wie ich sagte, wir hätten GraphQL intern verwendet, um unsere Website zu erstellen? Wir entlarven nicht nur die API, wir enthüllen auch die Fragen selbst. Klicken Sie auf die Schaltfläche "Little Export" exportieren, kopieren Sie die Abfrage in "GraphQL", fügen Sie sie in das Fenster Abfragen von GraphiQL ein und klicken Sie auf die Schaltfläche "Spielen".

Wenn alles nach Plan verlief, sollten Sie sehen, dass Ihre Daten im Ergebnisbereich angezeigt werden. Nehmen wir uns einen Moment Zeit, um die Abfrage zu analysieren.

 Abfrage React_experienceQuery {
  Umfrage (Umfrage: js) {
    Tool (ID: React) {
      Ausweis
      juristische Person {
        Homepage
        Name
        Github {
          URL
        }
      }
      Erfahrung {
        Allyears {
          Jahr
          gesamt
          Fertigstellung {
            zählen
            Prozentsatz
          }
          BewusstseinsinterestSatisFaction {
            Bewusstsein
            Interesse
            Zufriedenheit
          }
          Eimer {
            Ausweis
            zählen
            Prozentsatz
          }
        }
      }
    }
  }
}

Zuerst kommt das Keyword für Abfragen, das den Beginn unserer GraphQL -Abfrage zusammen mit dem Namen der Abfrage, React_ExperienceQuery, definiert. Abfragennamen sind in GraphQL optional, können jedoch für Debugging -Zwecke nützlich sein.

Wir haben dann unser erstes Feld, die Umfrage, die ein Umfrageargument annimmt. (Wir haben auch einen Zustand der CSS -Umfrage, daher mussten wir die fragliche Umfrage angeben.) Wir haben dann ein Toolfeld, das ein ID -Argument annimmt. Und alles danach hängt mit den API -Ergebnissen für dieses spezielle Tool zusammen. Entity gibt Ihnen Informationen zu dem ausgewählten Tool (z. B. React), während die Erfahrung die tatsächlichen statistischen Daten enthält.

Anstatt hier all diese Felder durchzugehen, werde ich Ihnen einen kleinen Trick beibringen: Befehl klicken (oder steuern Sie sie) eines dieser Felder in GraphiQL und es wird das DOCS -Panel angezeigt. Herzlichen Glückwunsch, Sie haben gerade einen anderen von GraphQls raffinierten Tricks, Selbstdokumentation, gesehen! Sie können Dokumentation direkt in Ihre API -Definition schreiben, und GraphiQL wird es den Endbenutzern zur Verfügung stellen.

Variablen ändern

Lassen Sie uns die Dinge ein wenig optimieren: Ersetzen Sie im Query-Builder "React" durch "VueJs" und Sie sollten ein weiteres cooles GraphQL-Ding bemerken: automatische Vervollständigung. Dies ist sehr hilfreich, um Fehler zu vermeiden oder Zeit zu sparen! Drücken Sie erneut auf "Spiel" und Sie erhalten die gleichen Daten, diesmal jedoch für Vue.

Verwenden des Explorers

Wir werden jetzt ein weiteres GraphQL -Elektrowerkzeug freischalten: den Explorer. Der Entdecker ist im Grunde ein Baum Ihrer gesamten API, mit dem Sie nicht nur seine Struktur visualisieren können, sondern auch Abfragen erstellen können, ohne eine einzige Codezeile zu schreiben! Lassen Sie uns also versuchen, unsere React -Abfrage diesmal mit dem Explorer nachzubilden.

Öffnen wir zunächst eine neue Registerkarte "neue Browser" und laden Sie graphiql.stateofjs.com darin, um frisch zu starten. Klicken Sie im Explorer auf den Umfrageknoten und klicken Sie unter ihm auf den Toolknoten auf "Spielen". Das ID -Feld des Tools sollte automatisch zu den Ergebnissen hinzugefügt werden, und übrigens ist dies ein guter Zeitpunkt, um den Standardargumentwert ("TypeScript" auf "Reagieren" zu ändern.

Als nächstes bohren wir weiter. Wenn Sie Entität ohne Unterfelder hinzufügen, sollten Sie eine kleine, schneller rote Linie darunter sehen, in der Sie wissen, dass Sie auch mindestens ein oder mehrere Unterfelder angeben müssen. Fügen wir also mindestens ID, Name und Homepage hinzu. Ein weiterer nützlicher Trick: Sie können GraphiQL automatisch sagen, dass alle Unterfelder eines Feldes durch Optionskontrollklick im Explorer hinzugefügt werden sollen.

Als nächstes ist Erfahrung. Fügen Sie weiterhin Felder und Unterfelder hinzu, bis Sie etwas erhalten, das sich der Abfrage nähert, die Sie ursprünglich aus dem Zustand der JavaScript -Site kopiert haben. Jedes Element, den Sie auswählen, wird sofort im Abfragebuilder -Panel reflektiert. Da Sie gehen, Sie haben gerade Ihre erste GraphQL -Abfrage geschrieben!

Filterdaten

Möglicherweise haben Sie ein lila Filtergegenstand bemerkt. Dies ist tatsächlich der Grund, warum Sie unsere GraphQL -API verwenden möchten, anstatt einfach auf unserer Website zu stöbern: Jede von der API bereitgestellte Aggregation kann durch eine Reihe von Faktoren gefiltert werden, wie das Geschlecht des Befragten, die Größe, das Gehalt oder das Land des Befragten.

Erweitern Sie die Filter und wählen Sie Companysize und dann EQ und Range_more_than_1000. Sie haben gerade Reacts Popularität bei großen Unternehmen berechnet! Wählen Sie stattdessen Range_1 aus und Sie können es jetzt mit demselben Datenpunkt unter Freiberuflern und unabhängigen Entwicklern vergleichen.

Es ist wichtig zu beachten, dass GraphQL nur sehr niedrige Primitive wie Felder und Argumente definiert, sodass diese EQ, in, Nin usw., Filter, nicht Teil von GraphQL selbst sind, sondern einfach Argumente, die wir beim Einrichten der API selbst definiert haben. Dies kann zunächst eine Menge Arbeit sein, aber es gibt Ihnen die vollständige Kontrolle darüber, wie Kunden Ihre API abfragen können.

Abschluss

Hoffentlich haben Sie gesehen, dass das Abfragen einer GraphQL -API nicht so groß ist, insbesondere mit fantastischen Tools wie GraphiQL, die Ihnen helfen, dies zu tun. Nun sicher ist es eine andere Angelegenheit, GraphQL-Daten in eine reale App zu integrieren. Dies ist jedoch hauptsächlich auf die Komplexität der Umgang mit Datenübertragungen zwischen Client und Server zurückzuführen. Der GraphQL -Teil selbst ist eigentlich ganz einfach!

Egal, ob Sie hoffen, mit GraphQL zu beginnen oder gerade genug zu lernen, um unsere Daten abzufragen und einige erstaunliche neue Erkenntnisse zu finden, ich hoffe, dieser Leitfaden hat sich als nützlich erwiesen!

Und wenn Sie daran interessiert sind, an unserer nächsten Umfrage teilzunehmen (die der Bundesstaat CSS 2020 sein sollte), melden Sie sich unbedingt für unsere Mailingliste an, damit Sie beim Starten benachrichtigt werden können.

Zustand der JavaScript -API -Referenz

Weitere Informationen zur API (einschließlich Links zum tatsächlichen Endpunkt und zum GitHub Repo) finden Sie unter api.stateofjs.com.

Hier ist ein kurzes Glossar der Begriffe, die im Zustand der JS -API verwendet werden.

Top-Level-Felder

• Demografie: Alle Demografie -Informationen wie Geschlecht, Unternehmensgröße, Gehalt usw. neu gruppieren.
• Entität: Gibt Zugriff auf weitere Informationen zu einer bestimmten „Entität“ (Bibliothek, Framework, Programmiersprache usw.).
• Feature: Verwendungsdaten für eine bestimmte JavaScript- oder CSS -Funktion.
• Merkmale: Gleiches, aber über eine Reihe von Funktionen.
• Matrizen: Erhält Zugriff auf die Daten, mit denen unsere Cross-Referential-Heatmaps bevölkert werden.
• Stellungnahme: Meinungsdaten für eine bestimmte Frage (z. B. „Glauben Sie, dass sich JavaScript in die richtige Richtung bewegt?“).
• OtherTools: Daten für den Abschnitt „Andere Tools“ (Textredakteure, Browser, Bundler usw.).
• Ressourcen: Daten für den Abschnitt „Ressourcen“ (Websites, Blogs, Podcasts usw.).
• Tool: Erleben Sie Daten für ein bestimmtes Tool (Bibliothek, Framework usw.).
• Werkzeuge: Gleiches, aber über eine Reihe von Werkzeugen.
• ToolsRankings: Rankings (Bewusstsein, Interesse, Zufriedenheit) über eine Reihe von Werkzeugen hinweg.

Gemeinsame Felder

• Fertigstellung: Welcher Anteil der Befragten beantwortete eine bestimmte Frage.
• Eimer: Das Array, das die tatsächlichen Daten enthält.
• Jahr/Allyears: Ob Sie die Daten für ein bestimmtes Erhebungsjahr erhalten; oder ein Array, das alle Jahre enthält.

Das obige ist der detaillierte Inhalt vonÜben Sie GraphQL -Abfragen mit dem Status der JavaScript -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!