graphqldesigner.com - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #typescript #go #android #machine-learning #docker #macos #awesome #cli #vue #mcp

graphqldesigner.com

(★ 625)

A developer web-app tool to rapidly prototype a full stack implementation of GraphQL with React.

File Explorer

Download Latest Version (.zip)

- 01-force-https.config
- https_rewrite.config
- - action-types.js
  - actions.js
- - app.css
  - app.jsx
- - generalReducers.js
  - index.js
  - queryReducers.js
  - schemaReducers.js
- index.jsx
- store.js
- - express.png
  - github-team.png
  - GitHub.png
  - githubicon.png
  - graphql.ico
  - graphql.png
  - graphql_wallpaper.png
  - Greg.jpg
  - In-R.png
  - In-TM.png
  - James.jpg
  - linkedin.png
  - Logo.svg
  - Patrick.jpg
  - react.png
  - relation1.png
  - relation2.png
  - Team-mascot.JPG
  - Tsion.jpg
  - wireframe.png
- index.html
- styles.css
- Screenshot-Code.png
- Screenshot-CodeUpdated.png
- Screenshot-Query.png
- Screenshot-Schema.png
- Screenshot-SchemaUpdated.png
- index.js
- - field.test.js
  - table.test.js
  - welcome.test.js
- - client_mutations.js
  - client_queries.js
  - create_client_root_index.js
  - create_component_index.js
  - create_component_style.js
  - create_indexhtml.js
  - create_packagejson.js
  - create_readme.js
  - create_webpack.js
  - express_server.js
  - graphql_server.js
  - mongo_schema.js
  - mysql_scripts.js
  - postgresql_scripts.js
  - sql_pool.js
.babelrc
.gitignore
.travis.yml
graphql.gif
LICENSE.md
package.json
README.md
webpack.config.js

# Installation Guide

1. Get the code

git clone https://github.com/GraphQL-Designer/graphqldesigner.com

Downloads the entire project code from GitHub to your computer.

cd graphqldesigner.com

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm run pack

Type this command into your terminal and run it.

npm run server

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# GraphQL Designer ![alt text](https://travis-ci.org/GraphQL-Designer/graphqldesigner.com.svg?branch=dev)

[GraphQL Designer](http://graphqldesigner.com/) is a prototyping tool to develop full-stack GraphQL applications.

With a few simple inputs, GraphQL Designer auto generates code for download, to start and implement your new application including GraphQL root queries, schemas, mutations, and client queries. Also available for download are the NoSQL schemas or SQL build scripts, and a server file.

![](https://raw.githubusercontent.com/GraphQL-Designer/graphqldesigner.com/master/graphql.gif)

## Background

GraphQL is an emerging open source data query and manipulation language that can be a preferred method over RESTful architecture, fulfilling queries with less API calls, and limiting over-fetching and under-fetching of data. Although GraphQL is a powerful query language, starting a new GraphQL application can be time consuming due to its redundant structure. This repetitive code can make developing a GraphQL application more intuitive, but this could also mean that for every GraphQL type created, a large amount of additional code would be required.

For example, adding a new GraphQL type "User" with the fields "id", "age", and "messages" may require the following:
- A root query for an individual User by id
- A root query for all the Users
- Mutation to create a User with an id, age, and messages
- Mutation to select a User by id, and update their age or messages
- Mutation to delete a User by id
- Client queries for User and the particular fields
- A NoSQL schema or SQL create script for User

You will notice that all these items revolve around a similar piece of information - User and its fields: id, age, and messages.

GraphQL Designer solves this repetition by requiring the developer just to enter the information once. Once a GraphQL type is created on this platform, root queries, mutations, client queries, and a NoSQL schema or SQL create script is auto generated and ready for download. After download, the code can be simply dragged and dropped into your code base or favorite text editor!

## How To Use

Visit [GraphQL Designer](http://graphqldesigner.com/) and choose a database model to implement (MongoDB or MySQL). Based on the database selected, our application will generate the code for your database schemas or build scripts and GraphQL resolvers.

Next create a table for every GraphQL type your application will need. Each table created will also represent the structure of your NoSQL schema or SQL table. Each created table in our application can have several fields, which not only becomes a GraphQL field, but a SQL column or NoSQL key as well.

![](https://raw.githubusercontent.com/GraphQL-Designer/graphqldesigner.com/master/Screenshots/Screenshot-SchemaUpdated.png)

The fields can be customized to meet your desired database structure, and using relations, can dynamically make the resolvers for each GraphQL type. By default at this point, our application can auto generate a server file, database setup code, and GraphQL types, root queries, mutations, and client queries.

![](https://raw.githubusercontent.com/GraphQL-Designer/graphqldesigner.com/master/Screenshots/Screenshot-CodeUpdated.png)

Lastly export your code!

## Authors

[James Sieu](https://www.linkedin.com/in/james-sieu/) [@jamessieu](https://github.com/jamessieu)

[Patrick Slagle](https://www.linkedin.com/in/patrickslagle/) [@patrickslagle](https://github.com/patrickslagle)

[Greg Shamalta](https://www.linkedin.com/in/gregory-shamalta/) [@grs83](https://github.com/grs83)

[Tsion Adefres](https://www.linkedin.com/in/tadefres/) [@Tsionad](https://github.com/Tsionad)

## Running Your Own Version

Use `npm run dev` for hot module reloading

To start the server:
```
npm install
npm run pack
npm run server
```

## License

This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/GraphQL-Designer/graphqldesigner.com/blob/master/LICENSE.md) file for details.