Softonic

GraphQL-querybouwer

Stap 1 / 2
Argumenten
Query bouwen

Een GraphQL-operatie handmatig schrijven betekent dat je accolades, argumenten en inspringing netjes moet houden. Deze bouwer stelt het document voor je samen: kies query, mutatie of subscription, geef de operatie een naam, stel het rootveld in, voeg argumenten toe en zet de velden op een rij die je nodig hebt. Het resultaat is een opgemaakte operatie die je rechtstreeks in Apollo, urql of GraphiQL kunt plakken.

Hoe je een GraphQL-operatie bouwt

  1. 1

    Kies het operatietype

    Kies query, mutatie of subscription in de dropdown. Dit bepaalt welk soort operatie de server uitvoert.

  2. 2

    Geef de operatie een naam

    Geef een naam zoals GetUser zodat de server de operatie kan loggen en cachen. De naam is optioneel; de bouwer werkt ook zonder.

  3. 3

    Stel het rootveld in

    Typ het veld dat je wilt aanroepen, bijvoorbeeld user, createPost of orderUpdated.

  4. 4

    Voeg argumenten toe

    Voeg sleutel-waardeparen toe zoals id: "123" of id: $id. Rijen met een lege sleutel worden overgeslagen.

  5. 5

    Zet de velden op een rij en kopieer

    Typ één veld per regel, bouw de query en kopieer het opgemaakte document naar het klembord.

Werken met GraphQL-documenten

Een GraphQL-document is een verzameling van één of meer operaties plus alle fragmenten waarnaar ze verwijzen. Elke operatie benoemt een rootveld van het type Query, Mutation of Subscription, en de server lost de selectieset op die je opvraagt. De bouwer schrijft de operatietekst voor je, maar kent je schema niet. Controleer daarom elke veld- en argumentnaam tegen je API voordat je de operatie uitvoert.

Operatieanatomie

Deel Doel Voorbeeld
Operatietype Query, mutatie of subscription query, mutation, subscription
Operatienaam Gebruikt voor caching en logs GetUserById
Argumenten Waarden die aan het rootveld worden doorgegeven user(id: "123")
Selectieset Velden en geneste selecties { user(id: "123") { name posts { title } } }
Variabelen Getypeerde invoer gedeclareerd bij de operatienaam query GetUser($id: ID!) { user(id: $id) { name } }

Veelvoorkomende valkuilen

  • Vereiste variabelen eindigen op !. Dit vergeten bij argumenten die in het schema als NonNull zijn gemarkeerd, geeft een validatiefout voordat de resolver draait.
  • Tekstargumenten hebben aanhalingstekens nodig. Een waarde als 123 is een getal; een tekstwaarde moet in de argumentregel als "123" met dubbele aanhalingstekens worden geschreven.
  • Union- en interfacetypen vereisen inline-fragmenten ... on TypeName om typespecifieke velden te lezen.
  • Aliassen zijn verplicht wanneer je hetzelfde veld twee keer met verschillende argumenten opvraagt, bijvoorbeeld today: stats(period: DAY) en week: stats(period: WEEK).
  • Connecties (Relay-specificatie) exponeren edges { node { ... } } en pageInfo { endCursor hasNextPage }; het overslaan van één van beide breekt de paginering.

Tips

  • Houd operaties klein en geef ze een naam, zodat Apollo Client ze afzonderlijk kan cachen.
  • Geef wisselende waarden door als variabelen in plaats van literals, zodat de server het document één keer kan parsen en hergebruiken; declareer ze bij de operatienaam, bijvoorbeeld query GetUser($id: ID!).
  • Heeft een veld meerdere argumenten nodig, zet ze dan in één argumentregel gescheiden door komma’s, bijvoorbeeld filter: { status: ACTIVE } als waarde.
  • De bouwer levert precies de tekst op die je instelt. Faalt een operatie, vergelijk dan eerst je veldnamen met het huidige schema.

Veelgestelde vragen

Nee. Hij formatteert alleen de tekst die je invoert; er is geen endpoint om aan te roepen en geen schema nodig. Vul de onderdelen van de operatie in en de bouwer stelt het document voor je samen.

Ja. Gebruik de operatiedropdown om te schakelen tussen query, mutatie en subscription. De rest werkt hetzelfde: naam, rootveld, argumenten en velden.

Voeg rijen toe in het gedeelte Argumenten. De sleutel is de argumentnaam en de waarde is wat je doorgeeft, bijvoorbeeld id: “123” of id: $id. Rijen met een lege sleutel worden genegeerd. Typ je een variabele zoals $id, declareer die dan zelf bij de operatienaam, bijvoorbeeld query GetUser($id: ID!).

De bouwer levert precies de tekst op die je hebt getypt. De fout betekent meestal dat een veld- of argumentnaam niet overeenkomt met het schema van je server: vergelijk het rootveld en elke veldnaam met je API en corrigeer de spelling.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

E-mailvalidator

Valideer een e-mailadres: RFC 5322-syntaxcontrole, live MX-record-zoekopdracht, plus details over lokaal deel, domein en lengte. Er wordt geen e-mail verstuurd.

EditorConfig-generator

Genereer een .editorconfig-bestand met uw regels voor inspringstijl en -grootte, regeleinde, tekenset en witruimte voor consistente opmaak in alle IDE's en editors.

HTML-opmaker

Formatteer HTML lokaal in de browser met twee of vier spaties inspringing. HTML wordt niet geüpload of gevalideerd.

Tool beschikbaar in andere talen