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
  • Scalars
  • Place decoders and encoders in one place for reuse

Was this helpful?

  1. Tools
  2. GraphQL Zeus
  3. GraphQL

Scalars

Scalars

In Zeus you can encode and decode scalars.

Decode

The decode function is called every time a scalar returns from backend before passing the result from Chain, Subscription functions

scalar JSON
scalar Datetime
type Card{
    info: JSON!
    createdAt: Datetime
}
type Query:{
    drawCard: Card!
}
import { Chain } from './zeus';

// Create a Chain client instance with the endpoint
const chain = Chain('https://faker.graphqleditor.com/a-team/olympus/graphql');

// Query the endpoint with Typescript autocomplete for arguments and response fields
const data = await chain('query', {
  scalars: {
    JSON: {
      encode: (e: unknown) => JSON.stringify(e),
      decode: (e: unknown) => JSON.parse(e as string),
    },
    Datetime: {
      decode: (e: unknown) => new Date(e as string),
      encode: (e: unknown) => (e as Date).toISOString(),
    },
  },
})({
  drawCard: {
    info: true,
  },
});

So the data.drawCard.info will be of type Date as provided by decoder ReturnType

Encode Scalars

You can also encode scalars before sending them to backend:

import { Chain } from './zeus';

// Create a Chain client instance with the endpoint
const chain = Chain('https://faker.graphqleditor.com/a-team/olympus/graphql');

// Query the endpoint with Typescript autocomplete for arguments and response fields
const listCardsAndDraw = await chain('query', {
  scalars: {
    JSON: {
      encode: (e: unknown) => JSON.stringify(e),
      decode: (e: unknown) => JSON.parse(e as string),
    },
    Datetime: {
      decode: (e: unknown) => new Date(e as string),
      encode: (e: unknown) => (e as Date).toISOString(),
    },
  },
})({
  drawCard: {
    info: true,
  },
});

Encoders require value to be encoded to string and don't work with variables yet.

Place decoders and encoders in one place for reuse

import { Chain, ZeusScalars } from './zeus';

// Create a Chain client instance with the endpoint
const chain = Chain('https://faker.graphqleditor.com/a-team/olympus/graphql');
const scalars = ZeusScalars({
  JSON: {
    encode: (e: unknown) => JSON.stringify(e),
    decode: (e: unknown) => JSON.parse(e as string),
  },
  Datetime: {
    decode: (e: unknown) => new Date(e as string),
    encode: (e: unknown) => (e as Date).toISOString(),
  },
});

// Query the endpoint with Typescript autocomplete for arguments and response fields
const listCardsAndDraw = await chain('query', {
  scalars,
})({
  drawCard: {
    info: true,
  },
});
PreviousDirectivesNextExamples

Last updated 2 years ago

Was this helpful?