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{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);
});