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

Subscriptions

PreviousCustom fetchNextGraphQL

Last updated 2 years ago

Was this helpful?

Zeus supports out-of-the-box and is compatible with many popular GraphQL servers.

Two implementations are supported:

  • graphql-ws: the modern WebSocket-based transport, implemented by . It is also the standard

  • legacy (default): a transport based on raw WebSockets

Generating the client

To use as your subscription transport you'll need to do the following:

# Generate the client
zeus schema.gql ./ --subscriptions graphql-ws
# Add graphql-ws to your project's dependencies
npm install graphql-ws

If you want to use legacy, use --subscriptions legacy instead. You may need to install depending on your setup.

No matter what implementation you chose, the usage remains the same:

// Create a new Subscription with some authentication headers
const wsChain = Subscription('wss://localhost:4000/graphql', {
  get headers() {
    return { Authorization: `Bearer ${getToken()}` };
  },
});

// Subscribe to new messages
wsChain('subscription')({
  message: {
    body: true,
  },
}).on(({ message }) => {
  console.log(message.body);
});

If you need to unsubscribe from a subscription (e.g. you are developing as Single Page App), you can do it as follows:

// Subscribe to new messages
const onMessage = wsChain('subscription')({
  message: {
    body: true,
  },
});
onMessage.on(({ message }) => {
  console.log(message.body);
});

// Close the underlying connection
onMessage.ws.close();

While you may use wsChain('query') or wsChain('mutation'),

GraphQL over WebSocket subscriptions
the graphql-ws package
used by Apollo
graphql-ws
ws
Apollo strongly discourages this practice.