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

Webpack-configuratiegenerator

Maak een webpack.config.js voor webpack 5 vanuit een kort formulier: stel entry, uitvoermap en mode in en zet TypeScript, Babel, een CSS-loader, HtmlWebpackPlugin en een dev-server aan.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

SVG-golfgenerator

Genereer een vloeiende SVG-golfscheiding voor headers en footers met instelbare amplitude, frequentie, kleur en positie boven of onder. Kopieer de SVG-code.

Decimaal naar hexadecimaal converter

Voer een decimaal geheel getal in en ontvang direct de hexadecimale waarde, inclusief negatieve waarden als 64-bits tweecomplement.

JSON-editor online

Bewerk JSON lokaal in de browser, bekijk de opgemaakte structuur, formatteer of minimaliseer tekst, sorteer sleutels en download een JSON-bestand.

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.

Tool beschikbaar in andere talen