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. Basics

Custom fetch

Zeus Thunder gives total control of the fetch function and you won't lose the result type. ⚡️

import { Thunder } from './zeus';

// Create thunder fetch client with endpoint, options and response handlers
const thunder = Thunder(async (query) => {
  const response = await fetch('https://faker.graphqleditor.com/a-team/olympus/graphql', {
    body: JSON.stringify({ query }),
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
  });

  if (!response.ok) {
    return new Promise((resolve, reject) => {
      response
        .text()
        .then((text) => {
          try {
            reject(JSON.parse(text));
          } catch (err) {
            reject(text);
          }
        })
        .catch(reject);
    });
  }

  const json = await response.json();

  return json.data;
});

// Call thunder client with type-safe arguments, fields and get type-safe result type
const listCardsAndDraw = await thunder('query')({
  cardById: [
    {
      cardId: 'sdsd',
    },
    {
      description: true,
    },
  ],
  listCards: {
    name: true,
    skills: true,
    attack: [
      { cardID: ['s', 'sd'] },
      {
        name: true,
      },
    ],
  },
  drawCard: {
    name: true,
    skills: true,
    Attack: true,
  },
});
PreviousJavaScriptNextSubscriptions

Last updated 2 years ago

Was this helpful?