• Stars
    star
    360
  • Rank 118,230 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

ProtoGraphQL is a prototyping tool that empowers developers to build and visualize GraphQL schemas and queries without writing any code.

ProtoGraphQL ver. 2.0

*** The latest release of ProtoGraphQL includes a new view that can jumpstart your query testing with the Jest framework and the ability to import tables from an existing database. ***

ProtoGraphQL is a prototyping tool that empowers developers to build and visualize GraphQL schemas and queries without writing any code. Once users import or input their relational database tables, ProtoGraphQL can generate an export package that allows developers to spin up a customized and functional GraphQL Apollo Server as an independent app. (As of version 2.0 custom mutations are also supported!)

ProtoGraphQL is in beta. Please post any issues to our GitHub - we are actively looking for opportunities to improve this tool and we welcome your feedback.

Upcoming releases will improve the โ€œSchemaโ€ view and add support for NoSQL databases.

Getting Started:

  1. Download: Mac, Windows, Linux

  2. Extract file

  3. Run application

How to Use:

  1. When the application starts you will be given the option to either CREATE YOUR TABLES or IMPORT TABLES. To create your tables, click the โ€œAdd Tableโ€ button in the lower left corner of the screen. When your config is complete, click Save. When importing, simply paste your database URI in the field and click the Connect button. In either case, your tables will be displayed in the main view when you are done.

  1. Navigate to the alternate views within the app using the tabs on the left: Schema, Code, Visualize, and Tests
  • Schema - view, edut or delete tables you've added.

  • Code - view generated GraphQL and SQL code.

  • Visualize - view the GraphQL schema as a simple tree.

  • Tests - create and export query and response pairs from a custom GraphQL Endpoint.

  1. Export your code by clicking the Export icon in the upper right.

  1. Enter your Postgres database URI, then select the directory you want to save your compressed GraphQL server package in.

How to Run GraphQL Server:

There are several libraries we could have used to create a GraphQL server, but we decided to use Apollo Server โ€“ the most popular library to setup an endpoint for responding to incoming GraphQL requests in JavaScript.

  1. Extract apollo-server.zip file

  2. Open the project

  3. Install dependencies

npm install
  1. Run the server and point your browser to localhost:3000
npm start
  1. Use Apollo Server Playground to mock client GraphQL queries and responses to your server. Learn more about constructing GraphQL Queries here

Contributors:

More Repositories

1

sapling

Sapling - A convenient way to traverse your React app in VS Code
JavaScript
489
star
2

Kafka-Sprout

๐Ÿš€ Web GUI for Kafka Cluster Management
Java
429
star
3

GraphQuill

Real-time GraphQL API Exploration in VS Code
TypeScript
395
star
4

seeql

see your database in a new way
TypeScript
344
star
5

Realize

A React component tree visualizer
JavaScript
327
star
6

Allok8

โšก๏ธA pretty swell Kubernetes visualization tool
JavaScript
273
star
7

ReactRTC

NPM package that simplifies set-up of WebRTC as importable React components
JavaScript
270
star
8

svend3r

Interactive plug and play charting library for Svelte
JavaScript
267
star
9

aether

All-in-One Memory Leak Testing Solution
JavaScript
250
star
10

Yodelay

Your preferred gRPC endpoint testing tool. Making sure your outbound ๐Ÿ—ฃ๏ธ โ€˜yodelayโ€™ returns the โ€˜IiiOooโ€™ ๐Ÿ“ฃ that you expect
TypeScript
228
star
11

ReactRPC

Full feature integration library for gRPC-Web into React
JavaScript
224
star
12

atomos

Atomos is an open source dev tool for Recoil that provides real-time visualization of the component tree and atom-selector relationships to facilitate debugging of a React application.
JavaScript
218
star
13

Dockter

A low-overhead, open-source Docker log management tool
TypeScript
217
star
14

svelte-sight

A Svelte dev tool for visualizing component hierarchy, state, and props of your application
Svelte
215
star
15

KUR8

A visual overview of Kubernetes architecture and Prometheus metrics
JavaScript
213
star
16

OpticQL

Developer tool focused on streamlining the performance testing and optimization of GraphQL API
JavaScript
212
star
17

connext-js

A middleware and route handling solution for Next.js.
JavaScript
210
star
18

hypnos

The best way to test GraphQL calls to RESTful APIs.
JavaScript
205
star
19

Equa11y

A stream-lined command line tool for developers to easily run accessibility testing locally through axe-core and puppeteer.
TypeScript
204
star
20

preducks

React/Redux/Typescript Application Prototyping & Smart Boilerplate Generation Tool
TypeScript
199
star
21

drawql

an OSS tool for designing a graphql endpoint in Apollo
CSS
195
star
22

kubermetrics

JavaScript
194
star
23

TotalRecoilJS

TotalRecoilJS is a tool created to help developers visualize/debug and track their Recoil state via a Chrome extension.
JavaScript
193
star
24

Horus

๐ŸŽฏ A gRPC-Node Distributed Tracing and Monitoring Tool.
JavaScript
187
star
25

PostQL

Web app to visualize your GraphQL metrics and provide historical analytics
TypeScript
186
star
26

Ahoy

Ahoy! is a GUI tool for DevOps engineers which distills the many functions of Helm into a user-friendly interface.
JavaScript
183
star
27

battletest

A CLI module for npm that auto-generates tests based on user specified parameters.
JavaScript
183
star
28

Deno-Redlock

Deno's first lightweight, secure distributed lock manager utilizing the Redlock algorithm
TypeScript
182
star
29

ReactMonitor

Quickly visualize React's component tree and its performance
JavaScript
181
star
30

Osiris

An Electron based desktop application for generating components, building pages, and storing them in a UI library.
JavaScript
177
star
31

protostar-relay

Open-source iteration of the official Relay devtool.
JavaScript
171
star
32

TorchQL

A tool to quickly generate GraphQL schemas and resolvers from a relational database
JavaScript
171
star
33

trydent

testing tamed
TypeScript
170
star
34

genesisQL

rapid schema-prototyping tool for GraphQL applications
JavaScript
169
star
35

FilamentQL

GraphQL query and caching solution
JavaScript
168
star
36

GatsbyHub

Access everything Gatsby has to offer without ever leaving Visual Studio Code. This VSCode Extension allows you to generate a new Gatsby site using a starter, browse Gatsby plugins, and develop a server all with a click of a button.
TypeScript
163
star
37

aditum

Accessibility components for managing focus in React SPAs
JavaScript
162
star
38

watchmo

JavaScript
162
star
39

react-chronoscope

Developer tool to monitor React performance
JavaScript
162
star
40

navigate

A Kubernetes cluster visualizer for DevOps engineers - network policies, aggregated scheduler logs, deployments and pods before your cluster is running!
TypeScript
161
star
41

TrunQ

NPM package for easy client and/or server side graphQL caching.
JavaScript
160
star
42

onyx

Onyx is authentication middleware for Deno, inspired by Passport.js
TypeScript
159
star
43

BACE

JavaScript
159
star
44

MASH

Kafka visualizer and management suite
TypeScript
158
star
45

portara

Portara directive is a rate limiter / throttler for GraphQL
TypeScript
158
star
46

irisql

GraphQL prototyping tool to quickly mock-up Node API's and visualize where you can query from.
JavaScript
158
star
47

Interspect

An API mocking tool for testing data interoperability between microservices and secure HTTP endpoints
JavaScript
157
star
48

SMEE

JavaScript
154
star
49

ChaosQoaLa

Chaos Engineering meets GraphQL
JavaScript
153
star
50

VaaS

Modular Kubernetes Management System with OpenFaaS Support
TypeScript
153
star
51

tropicRPC

A VS Code extension that provides gRPC API endpoint testing.
TypeScript
153
star
52

dashport

Local and OAuth authentication middleware for Deno
TypeScript
151
star
53

anagraphql

JavaScript
151
star
54

Trinity

A VSCode extension for Cypher and Neo4j
TypeScript
150
star
55

DockerLocal

DockerLocal is a GUI application that allows you to keep an up-to-date version of the docker compose file for interconnected repositories while doing development work on a single repository.
TypeScript
150
star
56

giraffeQL

๐Ÿฆ’ Developer tool to visualize relational databases and export schemas for GraphQL API's.
JavaScript
147
star
57

ProtoCAD

ProtoCAD is a prototyping tool that allows developers to build UI component tree structure based on GraphQL query results.
TypeScript
146
star
58

Trace

A lightweight GraphQL query performance monitoring GUI with real-time, resolver-level performance tracing metrics and error logging.
TypeScript
146
star
59

StratosDB

โ˜„๏ธ โ˜๏ธ An All-in-One GUI for Cloud SQL that can help users design and test their AWS RDS Instances
TypeScript
145
star
60

snAppy

snAppy is a VS Code extension coupled with an interactive view to support your React front-end delivery.
TypeScript
144
star
61

synapse

Realtime API Library
TypeScript
144
star
62

SpectiQL

GraphQL query, mutation, subscription test generator
JavaScript
143
star
63

starfleet

Command line tool to generate GraphQL services from Mongoose schemas with full CRUD functionality and deploy them to the cloud
JavaScript
143
star
64

pelican

Automated GUI canary testing for your kubernetes clusters
JavaScript
140
star
65

ProtoNative

A React Native prototyping tool for developers.
TypeScript
140
star
66

reactFLO

A Chrome DevTool built for developers to visualize the flow of state throughout their application.
TypeScript
140
star
67

ReactionTime

ReactionTime provides a simpler way to write tests for React's Experimental Concurrent Mode.
TypeScript
140
star
68

DacheQL

GraphQL caching tool
JavaScript
139
star
69

KuberOptic

An Electron app for developers to visualize their Kubernetes clusters in real-time
TypeScript
137
star
70

sono.land

Real-time Communication Library for Deno (WebSockets & WebRTC)
TypeScript
137
star
71

KubeScrape

KubeScrape: An open-source dev tool that provides an intuitive way to view the health, structure, and live metrics of your Kubernetes cluster
JavaScript
136
star
72

LucidQL

A developer tool and visualizer that generates a GraphQL schema from an established relational database.
JavaScript
135
star
73

Hookd

A cli tool and visualizer for converting React class components to functional components with hooks.
TypeScript
135
star
74

kr8s

Docker/Kubernetes Visualization Tool
JavaScript
133
star
75

Svelcro

Svelte DevTool with a focus on rendering
JavaScript
133
star
76

KnightOwl

An npm package of GraphQL middleware to protect you from malicious queries.
JavaScript
133
star
77

Palaemon

Palaemon is an open-source developer tool for monitoring health and resource metrics of Kubernetes clusters and analyzing Out of Memory (OOMKill) errors
TypeScript
133
star
78

SvelTable

Feature rich data table component.
Svelte
132
star
79

Ekkremis

A periscopic view into pending Kubernetes pods
TypeScript
132
star
80

kQ

TypeScript
131
star
81

fflow

fflow is an easy-to-use open-source tool for all developers to create their React application.
JavaScript
127
star
82

KlusterView

Get instant insights on your Kubernetes clusters with our lightweight, plug-and-play performance monitoring tool
TypeScript
125
star
83

Aqls-server

An intelligent full-stack GraphQL subscription and analytics module. Server-side analytics processing, self-auditing router, and resolver plugins.
JavaScript
123
star
84

kondo

JavaScript
123
star
85

periqles

React form library for Relay and Apollo
JavaScript
120
star
86

ThermaKube

A web application that monitors the health and performance of Kubernetes clusters with support for AWS EKS deployments
JavaScript
120
star
87

arteMetrics

Creating performance monitors for Apollo implementations of graphQL.
JavaScript
118
star
88

QLens

QLens is an electron app which dynamically generates GraphQL Schemas and Mongo Schema visualization. QLens significantly cuts development time by automating the formation of their GraphQL schemas based on information fetched from their non-relational database.
JavaScript
118
star
89

firecomm

A complete framework for gRPC-node.
JavaScript
117
star
90

Kafkasocks

JavaScript
114
star
91

ReaPer

Dev tool to analyze the performance of user interface and single-page applications based on the React frontend library
JavaScript
114
star
92

dangoDB

A MongoDB ODM for Deno
TypeScript
111
star
93

AtomicKafka

JavaScript
110
star
94

Bedrock

A modular authentication library for Deno.
TypeScript
110
star
95

Docklight

Metrics for your Docker containers
TypeScript
109
star
96

Neptune

A light-weight, simple, and straightforward learning tool for your Kubernetes cluster
JavaScript
109
star
97

ArtemisQL

ArtemisQL is a GraphQL migration tool and database visualizer that empowers developers to build and implement GraphQL with ease.
TypeScript
108
star
98

shipm8

JavaScript
108
star
99

ReacTree

ReacTree - VS Code extension that generates a hierarchy tree of React components with each node listing the passed down props, indicating whether it's connected the Redux store, and guiding you to the associated file with the click of a button
TypeScript
107
star
100

reactron

Reactron is a React component visualizer that allows you to traverse an app's fiber tree and render components individually.
JavaScript
105
star