Zeus | GraphQL TypeScript generator

Strongly Typed GraphQL from the team at GraphQL Editor

GraphQL Zeus is the absolute best way to interact with your GraphQL endpoints in a type-safe way. Zeus uses your schema to generate Typescript types and strongly typed clients to unlock the power, efficiency, productivity and safety of Typescript on your GraphQL requests.

Features

⚡️ Types mapped from your schema
⚡️ Works with Apollo Client, React Query, Stucco Subscriptions (*more coming soon...)
⚡️ Works with Subscriptions
⚡️ Allows inferring complex response types
⚡️ Creates reusable selection sets (like fragments) for use across multiple queries
⚡️ Supports GraphQL Unions, Interfaces, Aliases and Variables
⚡️ Handles massive schemas
⚡️ Supports Browsers, Node.js and React Native in Javascript and Typescript
⚡️ Has a schema downloader
⚡️ Supports JSON schema generation\

Getting Started | Zeus GraphQL TypeScript generator

Use the Zeus CLI to generate types and GraphQL clients based on your schema, which you can then import into your projects to autocomplete, query and use GraphQL responses in a type-safe way.

Installation

$ npm i -g graphql-zeus
# OR
# yarn global add graphql-zeus

You can also install it locally to a project and then use it as an npm or yarn script command or with npx or yarn directly eg:

$ npx zeus schema.graphql ./
# OR
# yarn zeus schema.graphql ./

TypeScript

Zeus is TypeScript native, you can refer to imported types directly from the generated output of the CLI

$ zeus schema.graphql ./

Usage

To generate clients simply run this command:

for NodeJS:	for React Native:
`$ zeus schema.graphql ./ --node`	`$ zeus schema.graphql ./`

Other CLI Options

Here's a list of commands for other options and flags you can use with Zeus:
for a demo URL you can use: https://faker.graphqleditor.com/a-team/olympus/graphql

function:	command:
Open Zeus CLI help	`$ zeus help`
Specify an output folder	`$ zeus schema.graphql ./generated`
Output Typescript only	`$ zeus schema.graphql ./ --typescript`
Load schema from a URL	`$ zeus https://example.com ./`
Download and save your schema locally	`$ zeus https://example.com ./ --graphql=generated`
Generate and save a JSON schema locally	`$ zeus https://example.com ./ --graphql=generated`
Add a header value	`$ zeus https://example.com ./ --header=Authorization:myNiceAuthHeader`

Tip:

Add a script entry in your package.json file for quickly calling Zeus generation:

"scripts": {
//...
"generate": "zeus https://faker.graphqleditor.com/a-team/olympus/graphql zeusGenerated --typescript --header='My-Auth-Secret:JsercjjJY5MmghtHww6UF' --apollo"
},

Demo Endpoint

All demo code here is using the demo GraphQL endpoint of Olympus Cards{rel="nofollow"} built with GraphQL Editor. Feel free to check out the [GraphiQL interface](https://faker.graphqleditor.com/a-team/olympus/graphql){rel="nofollow"} too.

Query With Zeus Chain Client

You can now use the Zeus Chain client from the generated output to make type-safe queries and mutations to your endpoint and receive type-safe responses.

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')({
  cardById: [
    {
      cardId: 'da21ce0a-40a0-43ba-85c2-6eec2bf1ae21',
    },
    {
      name: true,
      description: true,
    },
  ],
  listCards: {
    name: true,
    skills: true,
    attack: [
      {
        cardID: [
          '66c1af53-7d5e-4d89-94b5-1ebf593508f6',
          'fc0e5757-4d8a-4f6a-a23b-356ce167f873',
        ],
      },
      {
        name: true,
      },
    ],
  },
  drawCard: {
    name: true,
    skills: true,
    Attack: true,
  },
});
// listCardsAndDraw is now typed as the response of the query.

When querying a GraphQL field that takes an argument like cardById above, the fields are defined in terms of a tuple for example: cardById: [ {...arguments} , {...response_selection_set} ] and the equivalent in gql syntax would be:

cardById (cardId: "da21ce0a-40a0-43ba-85c2-6eec2bf1ae21") {
  name
  description
}

For fields that have no argument, they receive only the response selection set object values.

Note: Chain will also accept a second argument of fetch-like options to configure the client with properties such as credentials, mode, headers etc...

Note: There is also an exported Zeus Gql convenience function in a Chain client, pre-configured with the endpoint specified in the CLI.

Listen on a WebSocket - GraphQL Subscriptions

Use the Zeus Subscription client creator in your generated output to create WebSocket connections to your GraphQL socket.

import { Subscription } from './zeus';

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

// Call the client instance and listen for responses
sub('subscription')({
  deck: {
    id: true,
  },
}).on((response) => {
  console.log(response.deck);
});