Neapolitan Pizza Margherita

    graphql-editor
    TypeScript icon, indicating that this package has built-in type declarations

    5.2.1 • Public • Published

    GraphQLEditor Editor

    npm Commitizen friendly npm downloads

    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!

    Cloud version

    Here is a cloud version of GraphQL Editor.

    Docs

    Here is a guide for GraphQL Editor.

    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

    Creator/Editor

    GraphQL Editor

    Relations

    GraphQL Editor

    Table of contents

    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
    

    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
            onSchemaChange={(props) => {
              setMySchema(props);
            }}
            schema={mySchema}
          />
        </div>
      );
    };
    
    render(<App />, document.getElementById('root'));

    GraphQLEditor component props

    GraphQLEditor

    property type description
    schema PassedSchema value of the schema
    setSchema (props: PassedSchema, isInvalid?: boolean) => void; set value of the schema
    readonly boolean lock editing
    diffSchemas { oldSchema: PassedSchema; newSchema: PassedSchema} view state
    theme EditorTheme current theme
    state { pane: ActivePane, code: boolean } view state
    onStateChange ( state?:{ pane: ActivePane, code: boolean } ) => void; on state changed
    onTreeChange (tree: ParserTree) => void on tree state changed

    PassedSchema

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

    ActivePane

    "relation" | "diagram" | "hierarchy"

    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 here

    GraphQL Editor Guide here

    GraphQL Blog here

    Keywords

    none

    Install

    npm i graphql-editor

    DownloadsWeekly Downloads

    451

    Version

    5.2.1

    License

    MIT

    Unpacked Size

    7.67 MB

    Total Files

    339

    Last publish

    Collaborators

    • slothking