• Stars
    star
    395
  • Rank 109,040 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 5 years ago
  • Updated almost 2 years ago

Reviews

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

Repository Details

Real-time GraphQL API Exploration in VS Code

GraphQuill

What is GraphQuill?

GraphQuill is a VS Code extension that performs GraphQL API endpoint testing within the VS Code environment. GraphQuill intends to remove the need for switching between VS Code and GraphiQL, Postman, or another API development tool.

Features

Core Features

  1. Starts your GraphQL server (if it is not already running).
NOTE: GraphQuill is compatible with local and dockerized servers and will check if the specified port has a running server on it.
GraphQuill is also compatible with **external** API's (accessed via a url in the config file).
  1. Parses GraphQL queries/mutations that are typed into the current open document in VS Code.
  2. Sends the queries/mutations to the GraphQL API.
  3. Renders the responses to the GraphQuill output channel on VS Code.

demo gif

Additional Features


Getting Started

Installation

GraphQuill can be installed from the VS Code Extensions marketplace here.

Setting up the config file

Open the command palette in VS Code (Cmd/Ctrl + Shift + P) and select "GraphQuill: Create GraphQuill Config File". A default config file will be generated. If you're using a locally-hosted server, update the entry point with your server's file path and add a port number. If you're using an external server, set the entrypoint to its URL. For more details, refer to the documentation.

GraphQuill's Mock GraphQL API

A GraphQL API that was used during GraphQuill's development has been open sourced in two repositories on Github to allow users to give GraphQuill a test drive. Below are two repositories, one that has been dockerized, and one that uses locally hosted PostgreSQL and MongoDB databases.

The dockerized version is here.

The locally hosted PostgreSQL and MongoDB databases version is here.

Write your first GraphQuill query

Search for GraphQuill from the command palette in VS Code (Cmd/Ctrl + Shift + P) and run the Activate command. If the graphQuill function is not defined, GraphQuill will inject a function definition on the top line of your file.

Anywhere in your open file, put a GraphQL query inside the graphQuill function. For example:

  graphQuill(`{
    customer (customerId: 8) {
      firstName
      lastName
      email
    }  
  }`);

  graphQuill('{ product (productId: 26) { name description weight } }');

On every save, GraphQuill will send any requests inside of the graphQuill functions to your GraphQL API and show responses in the GraphQuill Output Channel. To send another request, create a new invocation of the graphQuill function and put the new request as the argument.


Contributing and Issues

We are always looking to improve. If there are any contributions, feature requests or issues/bugs you have, please check out our documentation on contributions, feature requests or issues/bugs.

Release Notes

Created by: Alex Chao, Austin Ruby and Edward Greenberg

0.16.0 | Initial release of GraphQuill, More to come!

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

protographql

ProtoGraphQL is a prototyping tool that empowers developers to build and visualize GraphQL schemas and queries without writing any code.
JavaScript
360
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