GraphQL Zeus creates autocomplete client library for JavaScript or TypeScript which provides autocompletion for strongly typed queries.
From version 2.0 Zeus ⚡⚡⚡ support mapped types !!!
Supported Languages:
- Javascript
- Browser
- NodeJS
- React Native
- TypeScript
- Browser
- NodeJS
- React Native
How it works
Given the following schema Olympus Cards
Table of contents
- How it works
- Table of contents
- License
- How to use
- 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
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"
// }
Interfaces
And interfaces.
const {nameables} = await Gql.Query({
nameables: {
"__typename": true,
"name": true,
"...on CardStack": {
cards: {
Defense: true,
},
},
"...on Card": {
Attack: true,
},
},
});
// result
// {
// "nameables": [
// {
// "__typename": "EffectCard",
// "name": "Hector"
// },
// {
// "__typename": "CardStack",
// "name": "Scotty",
// "cards": [
// {
// "Defense": 1950
// },
// {
// "Defense": 76566
// },
// {
// "Defense": 64261
// }
// ]
// },
// {
// "__typename": "SpecialCard",
// "name": "Itzel"
// },
// ]
// }
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)
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 Type Casting
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
You can use Selectors on operations or ZeusSelect on concrete type
import { ZeusSelect, Selectors, Chain, ValueTypes } from './graphql-zeus';
const chain = Chain('https://faker.graphqleditor.com/aexol/olympus/graphql');
const { drawCard: cardSelector } = Selectors.Query({
drawCard: {
name: true,
description: true,
Attack: true,
skills: true,
Defense: true,
cardImage: {
key: true,
bucket: true
}
}
});
const cardSelector2 = ZeusSelect<ValueTypes["Card"]>()({
name: true,
description: true,
Attack: true,
skills: true,
Defense: true,
cardImage: {
key: true,
bucket: true
}
});
const queryWithSelectionSet = await chain.Query({
drawCard: cardSelector,
listCards: cardSelector2,
});
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.
- Fork this repo
- Create your feature branch: git checkout -b feature-name
- Commit your changes: git commit -am 'Add some feature'
- Push to the branch: git push origin my-new-feature
- Submit a pull request
Parsing
Simplier approach to GraphQL parsing. Using graphql-js library and parsing AST to simplier types.