GraphQL Architect Editor Monaco

A wrapper for monaco-graphql editor to be used with GraphQL Architect for creating GraphQL schemas

Try it in the live demo.

Goals

• [ ] Schema aware auto-complete and syntax highlighting for GraphQL type definitions
• [ ] Including neo4j-graphql.js specific directives (@cypher, @relation, etc)
• [ ] Command palette helpers for schema creation (right-click add cypher directive, etc)

Usage

npm install --save @grandstack/graphql-architect-editor-monaco

then

import GraphQLMonaco "@grandstack/graphql-architect-editor-monaco"
const App = () => (
  <div style={{ display: "flex" }}>
    <div className="full-height column">
      <div id="operation" style={{ height: "70vh" }}>
        <GraphQLMonaco />
      </div>
    </div>
  </div>
);
render(<App />, document.getElementById("root"));

See example

API

TODO: props, config, styling, etc...