Skip to content

SummaryDev/graphiql-explorer-sql

 
 

Repository files navigation

GraphQL and SQL editor web application

This is a single page React web app to edit GraphQL and SQL based on a popular GraphiQL IDE with GraphQL schema Explorer and a SQL Editor.

  • GraphiQL lets you edit GraphQL queries and send them to a GraphQL server
  • Explorer queries the GraphQL server for its schema and shows it in a tree view to help craft your queries
  • SQL editor lets you
    • send queries to your API server and view results in a paginated table
    • send create view commands to your API which can turn them into GraphQL queries and add them to your GraphQL schema

Build

Install dependencies:

npm install --force
# or
yarn install

Specify endpoints and default queries in environment variables:

REACT_APP_GRAPHQL_URL = 'https://yourgraphqlapiserver/v1/graphql' # GraphQL server endpoint
REACT_APP_GRAPHQL_SUBSCRIPTION_URL = 'wss://yourgraphqlapiserver/v1/graphql' # GraphQL server websocket endpoint
REACT_APP_SQL_URL = 'https://yoursqlapiserver/sql'  # SQL query endpoint url
REACT_APP_DEFAULT_GRAPHQL_QUERY = '{ event(limit: 10) { name } }'  # default query for the GraphQL editor
REACT_APP_DEFAULT_SQL_QUERY = 'select * from event limit 10'  # default query for the SQL editor

If deploying to a non root url set:

PUBLIC_URL = 'http://yourwebserver/console'

You can put these in a .env file in project's root or directly in code in ./src/constants/constants.js.

Build the web app for deployment to a web server.

npm run build
# or
yarn build

Develop

Serve the app in a development server. Your browser will automatically open to http://localhost:3000.

npm run start
# or
yarn start

Serve the app and start a mock SQL API server at http://localhost:8080.

npm run dev:mock
# or
yarn dev:mock

Build and deploy to Kubernetes cluster

Build with cluster specific env variables

Define environment to deploy to: dev, stage or prod.

export namespace=dev && export subdomain=$namespace.

For prod.

export namespace=dev && export subdomain=

Build with env variables for endpoints of the chosen environment

./build.sh

Copy content by kubectl to nginx data volume in the cluster

Copy built files

./deploy.sh

Observe updated web app at https://dev.summary.dev/console.

About

Graphiql with explorer and minimal sql editor

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 66.8%
  • CSS 29.8%
  • Shell 1.7%
  • HTML 1.7%