Installing GraphQL Editor (Open Source)

install_graphql_editor.md

How to set up GraphQL Editor locally

https://github.com/graphql-editor/graphql-editor

Installation

Step 1: Create react.js app with required additional dependencies

npx create-react-app graphql-editor --template typescript

Step 2: Add required dependencies

cd graphql-editor
npm i -D worker-loader css-loader file-loader webpack
npm i  graphql-editor monaco-editor @monaco-editor/react

Step 3: Replace contents in file src/App.txs

import { useState } from 'react';
import { GraphQLEditor, PassedSchema } from 'graphql-editor';
import './App.css';

export const App = () => {
  const [mySchema, setMySchema] = useState<PassedSchema>({
    code: '',
    source: "tree",
    passGraphValidation: true,
  });
  return (
    <div
      style={{
        flex: 1,
        width: '100%',
        height: '100%',
        alignSelf: 'stretch',
        display: 'flex',
        position: 'relative',
      }}
    >
      <GraphQLEditor
        setSchema={(props) => {
          setMySchema(props);
        }}
        schema={mySchema}
        path=''
      />
    </div>
  );
};

export default App;

Run the app

Just start the app using

npm start dev

Now start designing your APIs at http://localhost:3000