GraphQL Editor Guide
  • GraphQL Editor
    • Home
      • Getting Started
      • Workspaces
      • Projects
      • Live Collaboration
      • Keyboard navigation
    • Graph
      • GraphQL Creator
      • ERD like Relation View
      • Markdown Docs
      • Generate TypeScript library
      • Schema versioning
      • Compare Schema Versions
    • Schema Libraries
    • Cloud
      • GraphQL API Platform
      • Instant Mock backend
      • GraphiQL Cloud
      • Endpoint switcher
      • Rest to GraphQL
      • E2E Tests Builder & Runner
    • Microservices FaaS
      • Resolvers
      • Code Editor
      • Deploy local server
      • Deploy using GraphQL Editor
      • Secrets & CORS
      • Logs
    • JS Playground
    • Github Sync
    • Troubleshooting
  • Tools
    • CLI
      • Schema
      • Create a microservice project
      • Development
      • Cloud
        • Local server
        • Deploy
          • Gitlab CI
          • Github Actions
        • Push/Pull
        • Get the CI token
      • Code Generation
        • TypeScript Typings
        • Resolvers
        • Model Types
      • Integrations
        • Installation
        • Develop your integrations
    • Stucco JS
      • Resolvers
      • Custom Scalars
      • Examples
    • GraphQL Zeus
      • Basics
        • Getting Started
        • Selectors
        • ES Modules
        • Specification
        • Use as a library
        • JavaScript
        • Custom fetch
        • Subscriptions
      • GraphQL
        • Interfaces and Unions
        • Variables
        • Aliases
        • Generate Gql
        • Directives
        • Scalars
      • Examples
        • Forms
        • React state
      • Plugins
        • Typed Document Node
        • Apollo
        • StuccoJS Subscriptions
        • React Query
Powered by GitBook
On this page
  • Adding Parameters
  • Using widgets

Was this helpful?

  1. GraphQL Editor
  2. Cloud

GraphQL API Platform

Tool for building forms and previewing responses of GraphQL resolvers

PreviousCloudNextInstant Mock backend

Last updated 2 years ago

Was this helpful?

Our API platform is basically a richer GraphiQL. The concept is the same, but it displays forms for inputs and data in tables. Every query can be saved to the GraphQL Editor Cloud, the same way the project schema is saved.

Adding Parameters

If a query/mutation contains parameters they will be displayed as a form. This form can be customized which provides a better experience to the user than the classical gql console.

Using widgets

Sometimes the type from GraphQL is not enough to provide the correct field to the user. Widgets provide different form fields for those situations.

Date Widget

This widget provides the date and the datetime inputs formatted to the desired format.

Password Widget

Same as text but masks the input.

Constant Widget

Always provides the same value for the field.

Text field Widget

Same as text input, but with a configurable label and placeholder.

Text box Widget

Displays textarea instead of input for strings longer than input field.

Relation Widget

This widget helps display relations in your schema. If for example, you have to select one of the objects of type A in your form but you need to prefetch them you should use a relation widget. For example:

type Query{
  itemsByPerson(person: String): [Item!]
  people: [Person!]
}
type Item{
  name: String;
  owner: Person;
}
type Person{
  name: String;
  items: [Item!];
}

So for itemsByPerson input, you set Query.peopleas a helper to fetch People to select inside itemsByPerson.

Autocomplete Widget

Autocomplete widget is better for String completions such as map addresses.

Upload widget

This widget helps upload the file via the standard S3 way:

  1. Perform a mutation to receive putURL getURL params

  2. The widget will upload the file to the putURL

  3. It will return the file handle to the text input so it can be added to the object

response in table format
write in or use dropdown to select parameters
use built-in widgets or import them from a library