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

Was this helpful?

  1. Tools
  2. GraphQL Zeus
  3. Examples

Forms

To use GraphQL Zeus with forms you should make use of its generated Value Types. When submitting a form using a mutation it is much easier and type-safe to do it using ValueTypes.

Here's an example schema:

type Mutation {
  createUser(user: CreateUser!): String
}

input CreateUser {
  firstName: String!
  lastName: String!
  age: Int
  username: String!
}

You can use ValueTypes['CreateUser'] as params for submit form function

const submitForm = (values: ValueTypes['CreateUser']) => {
  // ..,rest of the code, validation
  return Chain('https://yourschemaurl.com/graphql', {
    headers: {
      Authorization: 'yourtoken',
    },
  })('mutation')({
    createUser: [{ user: values }, true],
  });
};
PreviousExamplesNextReact state

Last updated 2 years ago

Was this helpful?