graphql-editor / graphql-zeus

GraphQL client and GraphQL code generator with GraphQL autocomplete library generation ⚡⚡⚡ for browser,nodejs and react native ( apollo compatible )

Graph sorcery, that makes reading GraphQL schemas easier!

Website  |   Docs

GraphQLEditor makes it easier to understand GraphQL schemas. Create a schema by using visual blocks system. GraphQL Editor will transform them into code.

With GraphQL Editor you can create visual diagrams without writing any code or present your schema in a nice way!

How it works

Create GraphQL nodes and connect them to generate a database schema. You can also use builtin text IDE with GraphQL syntax validation

💡 What is GraphQL Editor?

GraphQL Editor is Graph based system for reading and designing the GraphQL schema

GraphQL Editor is a GraphQL visualizer and designer. It allows you to create and display GraphQL schemas as a visual graph.

🚀 Features

• Visual GraphQL Editing.
• GraphQL Monaco based IDE
• Selection observer. When node is clicked in visual Graph it automatically scrolls the code to the same node. When cursor is moved in code space
• Automatically bound interfaces. When interface is implemented on type fields of the interface add to the type. If it is already implemented editing interface edits all implementing nodes
• Writing,generating and displaying GraphQL Documentation in markdown. Generating GraphQL docs out of GraphQL descriptions in markdown
• Comparing different versions of GraphQL schemas with special node-sort sorting nodes and its fields to show the real difference in GraphQL Schema on AST omitting line numbers

Table of contents

• How it works
• 💡 What is GraphQL Editor?
• 🚀 Features
• Table of contents
• License
• Installation
• GraphQL SDL Editor
  • Usage
  • GraphQLEditor component props
• GraphQL Gql Editor
  • Usage
  • GraphQLGqlEditor component props
  • GraphQL Embedded Readonly Editor
• Support
• Team
• Underlying Parsing technology
• GraphQL Tutorials
• Authors

License

MIT

Installation

npm i -D worker-loader css-loader file-loader webpack

npm i  graphql-editor react react-dom monaco-editor @monaco-editor/react

GraphQL SDL Editor

Usage

import React, { useState } from 'react';
import { render } from 'react-dom';
import { GraphQLEditor, PassedSchema } from 'graphql-editor';

const schemas = {
  pizza: `
type Query{
	pizzas: [Pizza!]
}
`,
  pizzaLibrary: `
type Pizza{
  name:String;
}
`,
};

export const App = () => {
  const [mySchema, setMySchema] = useState<PassedSchema>({
    code: schemas.pizza,
    libraries: schemas.pizzaLibrary,
  });
  return (
    <div
      style={{
        flex: 1,
        width: '100%',
        height: '100%',
        alignSelf: 'stretch',
        display: 'flex',
        position: 'relative',
      }}
    >
      <GraphQLEditor
        setSchema={(props) => {
          setMySchema(props);
        }}
        schema={mySchema}
      />
    </div>
  );
};

render(<App />, document.getElementById('root'));

GraphQLEditor component props

GraphQLEditor

property	type	description	required	default
schema	PassedSchema	value of the schema	true
setSchema	(props: PassedSchema, isInvalid?: boolean) => void;	Function to be called when schema is set by the editor	true
readonly	boolean	lock editing	false	false
diffSchemas	Record<string, string>	Record containing graphql schemas with "name" as a key and graphql schema as a "value"	false
theme	EditorTheme	current theme		MainTheme
routeState	EditorRoutes	listen to route changes. Don't bind it with routeState though!	false
onStateChange	( r: EditorRoutes ) => void;	on route state changed	false
onTreeChange	(tree: ParserTree) => void	Function that could be fired if tree changes	false
placeholder	string	placeholder - empty editor	false

PassedSchema

property	type	description
code	string	value of the schema code
libraries	string	value of the current libraries

ActivePane

"relation" | "diagram" | "diff"

GraphQL Gql Editor

Usage

import React, { useState } from 'react';
import { render } from 'react-dom';
import { GraphQLEditor, PassedSchema } from 'graphql-editor';

const schema = `
type Query{
	pizzas: [Pizza!]
}
`;

export const App = () => {
  const [gql, setGql] = useState('');
  return ( ||
    <div
      style={{
        flex: 1,
        width: '100%',
        height: '100%',
        alignSelf: 'stretch',
        display: 'flex',
        position: 'relative',
      }}
    >
      <GraphQLGqlEditor
        gql={gql}
        setGql={(gqlString) => setGql(gqlString)}
        schema={{ code: schema }}
      />
    </div>
  );
};

render(<App />, document.getElementById('root'));

GraphQLGqlEditor component props

GraphQLEditor

property	type	description	required	default
schema	PassedSchema	value of the schema	true
gql	string	value of the gql	true
placeholder	string	placeholder - empty editor	false	undefined
setGql	(props: PassedSchema, isInvalid?: boolean) => void;	set value of the gql	true	undefined
readonly	boolean	lock editing	false	false
theme	EditorTheme	current theme	false	MainTheme

GraphQL Embedded Readonly Editor

If you only want to view the schema and embed it somewhere in your app you can use our embedded editor for that reason

import React from 'react';
import { EmbeddedGraphQLEditor } from 'graphql-editor';
import * as schemas from '../schema';

export const embeddedEditor = () => {
  return (
    <div
      style={{
        flex: 1,
        width: '100%',
        height: '100%',
        alignSelf: 'stretch',
        display: 'flex',
        position: 'relative',
      }}
    >
      <EmbeddedGraphQLEditor
        schema={{
          code: schemas.googleDirectionsNew,
          libraries: '',
        }}
      />
    </div>
  );
};

Support

Join our Discord Channel

Team

GraphQL Editor Website

Underlying Parsing technology

Whole graphql-editor parsing stuff is based on underlying zeus technology.

GraphQL Tutorials

Interactive GraphQL Tutorial

GraphQL Blog

Authors

• Artur Czemiel
• GraphQL Editor
• Aexol

graphql-zeus's Issues

Provide example casting with fetch

Add crossfetch to zeus

create E2E tests GQL

Provide POST headers as default to fetch

Document Utils

Rewrite Zeus Generics system

Create usage with other libs in readme

Export enums as objects in Javascript

Document Parser

Provide --node flag for node js in javascript and typescript

Rewrite Object Assigments in Generics System

Add Zeus type casting to readme

After #36 provide new Api object

Provide functions with already exported url injected to generated libs

Add project usage with url fetch to readme

Add project usage with URL fetch to readme so users can now how to powerfully introspect schemas in their own project using Zeus

Correct internal arrayfunc generated typings

Provide --rn flag for react native in javascript and typescript

Provide example Casting with apollo client

Add Zeus example stirng generator to readme

Rewrite Array Assigments in Generics

Add chaining example gif

Provide a way to pass variables

Add monthly downloads from npm badge to track downloads

Add query chaining support

Given the following schema

type WaveResult{
  status: String!
}

type Query {
  hello: String
  wave( strength: Int! ): WaveResult!
}

The following code should generate and fetch query

import { Chain, ChainApi } from './graphql-zeus'

Chain([
  ChainApi.Query.hello()({ name: true }),
  ChainApi.Query.wave({ strength: 5 })({ status: true })
])

This is related to #9 So we still need to provide the way to generate string queries and abstract the generated code to easier support chains

Export string gql queries

Export #9 payload type and then I will create Object same as Api named Gql so you can get pure queries from what you have type in graphql-zeus spec language.

Rewrite Function Assigments in Generics

Abstract fetch part and make it replaceable

Document TreeToTS

Document CLI

Make working on empty props

Generate Swift Code

Rewrite returned values in generics

Provide readme for chaining

Add colors to example console.logs

Create folder with typescript example

Correct spec

Should add function key to spec pseudocode

Remove Plain `Api` object for some time

Abstract Type generator as a first step to work in any language

We should have typings generated for other languages

Return generics must be recuirsive

Create E2E tests for the TreeToTS

Create E2E tests for the TreeToTS

Refactor code stage 2

Add option to pass HTTP headers

Our GraphQL API is protected by a HTTP Authorization header.
The option to pass this header when fetching the Schema from an URL would be nice.

Refactor generated code - stage 1

Code done by generation should be easiliy readable

Provide return payload typings

Export GenericOperationPayload with some better name

import { Api } from "../../../types/project";

type Func<P extends any[], R> = (...args: P) => R;

type ArgsType<F extends Func<any, any>> = F extends Func<infer P, any>
  ? P
  : never;

type UserApiType = typeof Api;
type UserApiTypeReturn = ReturnType<UserApiType>;

export type GenericOperationPayload<
  P extends keyof UserApiTypeReturn,
  T extends keyof UserApiTypeReturn[P]
> = UserApiTypeReturn[P][T] extends Func<any, infer R>
  ? R extends Func<any, any>
    ? ArgsType<R>[0]
    : never
  : never;

Think of server generation implementation

Having schema:

type Query{
  hello: String!
}

Generate resolver typings compatible with gaffer so you can wirte resolvers in way

const helloResolver:Resolvers<"Query","hello"> = () => {
   return 1
}

And that should throw an error in the editor.

const helloResolver:Resolvers<"Query","hello"> = () => {
   return "world"
}

That shouldn't

In Javascript though it should be splitted to declaration file and big object so you can redefine properties.

export const Resolvers = {
  Query:{
    hello:null
  }
}

So when you declare resolver you do

import { Resolvers } from './graphql-zeus-server'

Resolvers.Query.hello = () => {
  return "world"
}

Add response casting in JS

With Gql available user should be able to cast response from the other GraphQL library like apollo to the Zeus typings.

import { Cast,Gql } from './graphql-zeus'
import someApolloLib from 'apollo'

const myObject = Cast('
    someApolloLib(
        Gql(
            {
                Attack: true,
                name: true
            }   
        )
    ),
   'Query'
)

Create E2E tests - Parser

Create E2E tests for the Parser

Add support for resolving union types.

schema

type Bird{
  name: String!
  wingPower: Int!
}
type Cat{
  name: String!
  legPower: Int!
}
type Animal = Bird | Cat
type Query{
  animal: Animal
}

// Resolved type is typescript union type `type Animal = Bird | Cat`

Api.Query.animal()({
  Bird:{
     name: true,
     wingPower: true
  },
  Cat:{
     name: true,
     legPower: true
  } 
})

Use graphql-zeus with apollo

Hey, awesome project! I hope this isn't a stupid question, I couldn't find out anything about it in the docs

Would it be possible to use graphql-zeus together with something like apollo? If so, it'd be super awesome 😀

Throw error on fetch in nodejs environment

If fetch library is not provided throw an error