A Relay visualizer for all your GraphQL queries.
Homepage →
Product Hunt Page →
Explore the docs »
Table of Contents
Peach QE is the first Relay visualizer to handle all your GraphQL queries under one roof, directly on your desktop.
Upload pre-written queries, live-edit the queries you want to explore, variable inputs, and even handle as many databases as required.
-
Fork and Clone the Repo:
git clone https://github.com/oslabs-beta/peach.git
Install the dpendencies:
-
[ npm i ]
npm install
-
Run the Electron App locally
npm start
- In order to build the executable file (aka, the desktop client) you will need to run specific commands for your OS:
-
Mac:
npm run package-mac
-
Windows:
npm run package-win
-
Linux:
npm run package-linux
-
Look for the directory Release-builds in the root folder where you cloned this Repo. (created automatically by the previous command)
-
Find the specific folder for your OS. (e.g., peachQE-win)
-
The file peachQE.exe (in Windows) will launch the app in your machine.
In every case, you will need to add the file schema.graphql to the root directory and the file imported.js to the directory src>relay. For example:
.
├── (Root) # Installed Root folder
├── schema.graphql
├── src
├── relay # Create both folders
├── imported.js
│
└── ...
Once you have the application running, you will notice that PeachQE operates in two different "modes":
When the application first opens, the window will by default display "Relay Proper" mode, which contains much of the core functionality of the application:
-
The left section of the window is reserved for the Schema Display. Here, you can:
- View your current schema and type into the searchbar to find specific fields.
- Import a new Schema, updating the contents of the schema display to contain the newly imported schema.
- Update the GraphQL API url endpoint. This determines what API PeachQE is interacting with.
-
Below the Schema Display you will find the Variable Input. Here you can:
- Manually enter variables as JSON objects.
- The Variable Input will interact with the Query Input to set the response in the Reponse Display.
-
The central section is reserved for the Query Input. Here you can:
- Manually type in valid GraphQL queries.
- Select previous queries from the Query History dropdown. Once clicked the selected query will populate the Query Input Field.
- Submit your query.
-
The right section is the Response Display which, upon clicking the Submit Query button, will display the reponses to any submitted query.
By clicking the yellow button titled Peach Mode at the top right corner of the window, or simply by scrolling down, you will find our designated UI for Relay specific functionality.
While the Response Display functions entirely the same, the central and left sections have been altered to accomodate for Relay-specific functionality.
-
The left section still contains a Variable Input with two additional fields:
- The Query File Uploader simply directs you to the "Peaches" dropdown from the menu bar, where you can "Start a New Peach" by uploading a file containing a list of GraphQL Queries.
- The Store Display offers you a direct visual of the Relay Store, a Relay-specific functionality that stores all the data sent by your GraphQL Queries, and all the data sent back from the responding GraphQL API. It is effectively a log of your interactions with a given GraphQl API, and it is made available with PeachQE!
-
The central section contains 2 new components:
- The Query Editor where you may copy/paste or manually type in multiple GraphQl Queries. Upon clicking Save Edited Query, the user inputted text will be saved and rendered as Relay queries, which will be displayed in the New Query Selector.
- The New Query Selector will contain a list of queries matching the queries inputted in the Query Editor. You may then toggle between these queries, and the Response display will update with the currently selected query.
For more information, please visit our website
Distributed under the MIT License. See LICENSE for more information.