All Projects → oslabs-beta → GraphQL-Blueprint

oslabs-beta / GraphQL-Blueprint

Licence: MIT, MIT licenses found Licenses found MIT LICENSE MIT LICENSE.md
GraphQL Blueprint: a software developer tool for engineers that want to quickly generate React/Express, Apollo and GraphQL boilerplate code using a data modeling interface. Watch your queries, mutations, and schema update in realtime with our code preview feature and finally, export it when you're ready to begin building the rest of your app!

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to GraphQL-Blueprint

React Auth App Example
An app example with authentication using Create React App, React, React Router, Apollo, GraphQL, Redux and Redux Form.
Stars: ✭ 179 (+141.89%)
Mutual labels:  apollo, create-react-app
graphql-workshop
Hands on workshop about GraphQL with React and Apollo 🚀
Stars: ✭ 43 (-41.89%)
Mutual labels:  apollo, create-react-app
agollo
🚀Go client for ctrip/apollo (https://github.com/apolloconfig/apollo)
Stars: ✭ 563 (+660.81%)
Mutual labels:  apollo
fal
do more with dbt. fal helps you run Python alongside dbt, so you can send Slack alerts, detect anomalies and build machine learning models.
Stars: ✭ 567 (+666.22%)
Mutual labels:  data-modeling
graphql-workshop
⚒ 🚧 A GraphQL workshop to learn GraphQL implementations
Stars: ✭ 20 (-72.97%)
Mutual labels:  apollo
node-less-chokidar
Watch and build CSS from LESS, compatible with Create React App
Stars: ✭ 21 (-71.62%)
Mutual labels:  create-react-app
hackerNews-pwa
hacker news pwa
Stars: ✭ 17 (-77.03%)
Mutual labels:  create-react-app
apollo-tracing-elixir
Apollo Tracing middleware for Absinthe
Stars: ✭ 114 (+54.05%)
Mutual labels:  apollo
gitsearch
A searchbar for querying Github users and repositories. Written in React Native and React Native Web. GraphQL and Apollo Client to query Github GraphQL API.
Stars: ✭ 15 (-79.73%)
Mutual labels:  apollo
movies
🍿 react-app for movies
Stars: ✭ 60 (-18.92%)
Mutual labels:  create-react-app
react-intl.macro
Extract react-intl messages with babel-plugin-macros.
Stars: ✭ 39 (-47.3%)
Mutual labels:  create-react-app
apollo-express-ts-server-boilerplate
No description or website provided.
Stars: ✭ 29 (-60.81%)
Mutual labels:  apollo
legend-studio
Legend Studio
Stars: ✭ 53 (-28.38%)
Mutual labels:  data-modeling
Itunes-Top-100-albums
Fetching data from itunes api With lazy Loading using react
Stars: ✭ 14 (-81.08%)
Mutual labels:  create-react-app
adonisjs-create-react-app
Adonisjs + Create React App Boilerplate
Stars: ✭ 22 (-70.27%)
Mutual labels:  create-react-app
periqles
React form library for Relay and Apollo
Stars: ✭ 124 (+67.57%)
Mutual labels:  apollo
gitstar
Github Client built with React Apollo
Stars: ✭ 15 (-79.73%)
Mutual labels:  apollo
GitHub-GraphQL-API-Example-iOS
An example iOS application using GitHub GraphQL API with Apollo.
Stars: ✭ 23 (-68.92%)
Mutual labels:  apollo
create-react-app-express
⚙️ Express server for your Create React App (Backbone of cra-universal)
Stars: ✭ 20 (-72.97%)
Mutual labels:  create-react-app
apollo-link-fragment-argument
An Apollo Link to enable to parameterize fragments
Stars: ✭ 35 (-52.7%)
Mutual labels:  apollo

GraphQL Blueprint

GraphQL Blueprint helps you build full stack apps with boilerplate code. Currently on a React, Express, Apollo stack, you can template out GraphQL code by modeling your database schema with our easy-to-use interface.

Our interface provides you the ability, with a few simple inputs, to auto generate boilerplate code for download. As you can see in the video below, it resembles the activity of data modeling (another use case of GraphQL Blueprint). The boilerplate code gives you a head start to develop 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. Neat, right?

gqlblueprint.mp4

Background

GraphQL is an 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 Blueprint 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 Blueprint and choose one or many database models to implement (MongoDB, PostgreSQL or MySQL). our application will generate the code for your database schemas, 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.

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.

Lastly export your code! The download folder will contain a readme file that describes the organization of the boilerplate code is organized and how to run it.

Check out our issues panel to learn how you can contribute and if you like our app, please give it a star!

GraphQL Blueprint Authors

Sean Yalda @seanathon

Ethan Yeh @ehwyeh

Kevin Berlanga @kevinberlanga

Dylan Li @dylan2040

Newas Azad @nazad23

GraphQL Blueprint is forked and iterated upon from a previous open source project called GraphQL Designer.

More information: GraphQL Designer is a prototyping tool to develop full-stack GraphQL applications. It allowed you to model one database schema. We expanded upon it by allowing a multi-database schema, syntax highlighting, graph view, and persistant state with local storage among other things.

GraphQL Designer Authors

James Sieu @jamessieu

Patrick Slagle @patrickslagle

Greg Shamalta @grs83

Tsion Adefres @Tsionad

Running Your Own Version

Add webpack": "webpack --watch --hot to package.json file in scripts for hot module reloading. After adding, be sure to uncomment out "devtool" and "watch" keys from webpack.config file.

Be sure to undo above actions when creating pull request to pass Circle.Ci tests.

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 file for details.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].