GraphQL Zeus creates autocomplete client library for Javascript or Typescript which provides autocompletion for strongly typed queries.

Supported Languages:

• Javascript
  • Browser
  • NodeJS
  • React Native
• Typescript
  • Browser
  • NodeJS
  • React Native

How it works

Given the following schema Olympus Cards

Play with it live!

Table of contents

• How it works
• Table of contents
• License
• How to use
  • As a CLI
    • Installation
    • Usage with Javascript
    • Usage with TypeScript
    • Usage with NodeJS
    • Usage with React Native
    • Load from URL
  • Use generated client example
    • Perform query with Chain
    • Unions
    • Perform query with aliases
    • Single query with Api
    • Gql string
    • Javascript TypeCasting
    • Typescript SelectionSet
  • Spec
    • Use Alias Spec
  • Use In your Project to generate code
  • Use in your project to dynamically fetch schema
• Support
• Contribute
• Parsing

License

MIT

How to use

Main usage of graphql zeus should be as a CLI.

As a CLI

Installation

Install globally

$ npm i -g graphql-zeus

Of course you can install locally to a project and then use as a npm command or with npx

Usage with Javascript

$ zeus schema.graphql ./

It will also generate corresponding out.d.ts file so you can have autocompletion,

Usage with TypeScript

$ zeus schema.graphql ./  --ts 

Usage with NodeJS

$ zeus schema.graphql ./  --node 

Usage with React Native

Same as browser

$ zeus schema.graphql ./ 

Load from URL

$ zeus https://faker.graphqleditor.com/aexol/olympus/graphql ./generated

With Authorization header

$ zeus https://faker.graphqleditor.com/aexol/olympus/graphql ./generated --header=Authorization:dsadasdASsad

Use generated client example

$ zeus https://faker.graphqleditor.com/aexol/olympus/graphql ./generated

import { Api } from "./generated/graphql-zeus"

Perform query with Chain

import { Chain } from './graphql-zeus';
const createCards = async () => {
  const chain = Chain('https://faker.graphqleditor.com/aexol/olympus/graphql');
  const listCardsAndDraw = await chain.Query({
    cardById: [
      {
        cardId: 'sdsd'
      },
      {
        description: true
      }
    ],
    listCards: {
      name: true,
      skills: true,
      attack: [
        { cardID: ['s', 'sd'] },
        {
          name: true
        }
      ]
    },
    drawCard: {
      name: true,
      skills: true,
      Attack: true
    }
  });
};
createCards();
// Result of a query
// {
//     "drawCard": {
//         "Attack": 83920,
//         "name": "Raphaelle",
//         "skills": [
//             "RAIN",
//             "THUNDER",
//         ]
//     },
//     "cardById": {
//         "description": "Customer"
//     },
//     "listCards": [
//         {
//             "name": "Lon",
//             "skills": [
//                 "THUNDER"
//             ],
//             "attack": [
//                 {
//                     "name": "Christop"
//                 },
//                 {
//                     "name": "Theodore"
//                 },
//                 {
//                     "name": "Marcelle"
//                 }
//             ]
//         },
//         {
//             "name": "Etha",
//             "skills": null,
//             "attack": [
               
//                 {
//                     "name": "Naomie"
//                 }
//             ]
//         },
//         {
//             "attack": [
//                 {
//                     "name": "Kyle"
//                 },
//             ],
//             "name": "Arlene",
//             "skills": [
//                 "FIRE",
//             ]
//         }
//     ]
// }

Unions

You can use Zeus with unions:

const { drawChangeCard } = await chain.Query({
    drawChangeCard: {
      __typename: true,
      '...on EffectCard': {
        effectSize: true,
        name: true
      },
      '...on SpecialCard': {
        effect: true,
        name: true
      }
    }
});
// drawChangeCard result:
// {
//     "effectSize": 195.99532210956377,
//     "name": "Destinee",
//     "__typename": "EffectCard"
// }

Perform query with aliases

const aliasedQueryExecute = await chain.Query({
    listCards: {
      __alias: {
        atak: {
          attack: [
            { cardID: ["1"] },
            {
              name: true,
              description: true,
            },
          ],
        },
      },
    },
  });
// RESULT
// {
//     "listCards": [
//         {
//             "atak": {
//                 "attack": [
//                     {
//                         "name": "Zelma",
//                         "description": "Central"
//                     }
//                 ]
//             }
//         }
//     ]
// }

So you can access properties type-safe like this

aliasedQueryExecute.listCards.map(c=>c.atak.attack)

Single query with Api

Use single query with Api to get response casted.

import { Api } from './graphql-zeus';
const createCards = async () => {
  const api = Api('https://faker.graphqleditor.com/aexol/olympus/graphql');
  const drawedCard = await api.Query.drawCard({
    Attack: true,
    name: true
  });
};
createCards();
// Result of a query
// {
//     "Attack": 83098,
//     "name": "Jeanne"
// }

Gql string

Use Zeus to generate gql string

import { Zeus } from './graphql-zeus';
const createCards = async () => {
  const stringGql = Zeus.Query({
    listCards: {
      name: true,
      skills: true,
      Attack: true
    }
  });
  // query{listCards{name skills Attack}}
};
createCards();

To run the example navigate to: ./example and run

$ npm i

then run

$ npm run start

Use Api for single queries mutations and Chain for query chaining

Javascript TypeCasting

You can cast your response from fetch/apollo/other-lib to correct type even if you are using Javascript:

import { Cast } from './graphql-zeus';
const myQuery = Cast.Query(myLib("somegraphqlendpoint"))

Typescript SelectionSet

In typescript you can make type-safe selection sets to reuse them across queries

import { SelectionSet,Chain,Card } from './graphql-zeus';
const chain = Chain('https://faker.graphqleditor.com/aexol/olympus/graphql');
const cardSelectionSet: SelectionSet<Card> = {
  name: true,
  description: true,
  Attack: true,
  skills: true,
  Defense: true,
  cardImage: {
    key: true,
    bucket: true,
  },
};
const queryWithSelectionSet = await chain.Query({
  drawCard: cardSelectionSet,
  listCards: cardSelectionSet,
});

Spec

Promise of type query data object is returned.

PROMISE_RETURNING_OBJECT = Chain.[OPERATION_NAME]({
    ...FUNCTION_FIELD_PARAMS
})(
    ...QUERY_OBJECT
).then ( RESPONSE_OBJECT => RESPONSE_OBJECT[OPERATION_FIELD] )

Simple function params object

FUNCTION_FIELD_PARAMS = {
  KEY: VALUE
}

Query object

QUERY_OBJECT = {
    ...RETURN_PARAMS
}

Return params is an object containg RETURN_KEY - true if it is a scalar, RETURN_PARAMS if type otherwise it is a function where you pass Fiel params and type return params.

RETURN_PARAMS = {
    RETURN_KEY: true,
    RETURN_KEY: {
        ...RETURN_PARAMS
    },
    RETURN_FUNCTION_KEY:[
        {
            ...FUNCTION_FIELD_PARAMS
        },
        {
            ...RETURN_PARAMS
        }
    ]
}

Use Alias Spec

RETURN_PARAMS = {
  __alias: RETURN_PARAMS
}

Access aliased operation type-safe

PROMISE_RETURNING_OBJECT[ALIAS_STRING][OPERATION_NAME]

Use In your Project to generate code

This will be rarely used, but here you are!

import { Parser,TreeToTS } from 'graphql-zeus';

const schemaFileContents = `
type Query{
    hello: String!
}
schema{
    query: Query
}
`

const typeScriptDefinition = TreeToTS.resolveTree(Parser.parse(schemaFileContents));

const jsDefinition = TreeToTS.javascript(Parser.parse(schemaFileContents));

Use in your project to dynamically fetch schema

This is useful when you need some schema fetched from your GraphQL endpoint

import { Utils } from 'graphql-zeus';

Utils.getFromUrl("https://faker.graphqleditor.com/aexol/olympus/graphql").then(schemaContent => {
  // Use schema content here
})

Support

Join our GraphQL Editor Channel

Leave a star ;)

Contribute

For a complete guide to contributing to GraphQL Editor, see the Contribution Guide.

1. Fork this repo
2. Create your feature branch: git checkout -b feature-name
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

Parsing

Simplier approach to GraphQL parsing. Using graphql-js library and parsing AST to simplier types.