Fullstack GraphQL

Simple Demo Application

API built with Node + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL).

WebApp built with React + Redux.

Written in ES6 using Babel + Webpack.

📝 Features

• List thoughts
• Add thought
• Delete thought
• View single thought

▶️ Running

• Clone repo git clone git@github.com:atulmy/fullstack-graphql.git fullstack-graphql
• Install NPM modules API cd api and npm install
• Install NPM modules Webapp cd web and npm install
• Modify /api/src/config/database.json for database credentials
• Modify /api/src/config/config.json for API port (optional)
• Modify /web/.env for web port (optional)
• Run API cd api and npm start, browse GraphiQL at http://localhost:8000/
• Run Webapp cd web and npm start, browse web at http://localhost:3000/

Sample API logs

[nodemon] starting `babel-node src/index.js --presets es2015,stage-2`
SETUP - Connecting database...
SETUP - Loading modules...
SETUP - GraphQL...
SETUP - Syncing database tables...
INFO - Database connected.
INFO - Database sync complete.
SETUP - Starting server...
INFO - Server started on port 3000.

📸 Screenshots

Video: MOV

🏗 Core Structure

fullstack-graphql
  ├── api (api.example.com)
  │   ├── src
  │   │   ├── config
  │   │   ├── models
  │   │   ├── schema
  │   │   ├── setup
  │   │   └── index.js
  │   │
  │   └── package.json
  │
  ├── web (example.com)
  │   ├── public
  │   ├── src
  │   │   ├── components
  │   │   ├── setup
  │   │   └── index.js
  │   │
  │   ├── .env
  │   └── package.json
  │
  ├── .gitignore
  └── README.md

📘 Guides

API

• Adding new Module (Eg: Users):
  • Copy /api/src/models/thought.js to /api/src/models/user.js and modify the file for table name and respective fields
  • Add an entry to the models object in /api/src/models/index.js
  • Copy /api/src/schema/thoughts to /api/src/schema/users and modify type.js, resolvers.js and fields/query.js and fields/mutations.js
  • Import /api/src/schema/users/fields/query.js in /api/src/schema/query.js
  • Import /api/src/schema/users/fields/mutations.js in /api/src/schema/mutations.js

Webapp

• Adding new Module (Eg: Users):
  • Create folder users under /web/src/components/
  • Create your Container and Resusable components under /web/src/components/users
  • Create api folder under /web/src/components/users
  • Add actions.js where all your Redux Action Types and Actions will reside (refer /web/src/components/thoughts/api/actions.js)
  • Add state.js where all your respective Reducers will recide (refer /web/src/components/thoughts/api/state.js)
  • Import the module state in /web/src/setup/store.js to make it avaliable to the app
  • Encapsulate all your User related code in /web/src/components/users
• Adding new Route (Eg: /users):
  • Add a new entry to routes object in /web/src/setup/routes.js (eg user: { list: '/list' })
  • Edit /web/src/components/App.js and add the route entry

Sample GraphQL Queries

These queries are generated on client side using queryBuilder() helper defined in /web/src/setup/helpers.js

Query - Get List query { thoughts { id, name, thought } }	Response { "data": { "thoughts": [ { "id": 1, "name": "Arya Stark", "thought": "A girl has no name" }, { "id": 2, "name": "Jon Snow", "thought": "I know nothing" } ] } }
Query - Get by Param query { thought(id: 1) { id, name, thought } }	Response { "data": { "thought": { "id": 1, "name": "Arya", "thought": "A girl has no name" } } }
Mutation - Create mutation { thoughtCreate( name: "Tyrion Lannister", thought:"I drink and I know things" ) { id } }	Response { "data": { "thoughtCreate": { "id": 3 } } }
Mutation - Remove mutation { thoughtRemove(id: 3) { id } }	Response { "data": { "thoughtRemove": { "id": null } } }

💬 Community Reviews

Facebook Groups: NodeJS • ReactJS • GraphQL

Reddit: NodeJS • ReactJS • GraphQL

⭐ Showcase

Following projects have been built with or inspired from fullstack-graphql

• Crate - Get monthly subscription of trendy clothes and accessories - GitHub
• HIRESMART - Application to streamline hiring process - GitHub
• Would really appreciate if you add your project to this list by sending a PR

Resources

• Start learning by looking at sample codes: #LearnByExamples

🎩 Authors

• Atul Yadav - GitHub • Twitter • LinkedIn
• Nattatorn Yucharoen - GitHub

👏 Donate

If you liked this project, please donate to support it ❤️

📜 License

Copyright (c) 2017-18 Atul Yadav http://github.com/atulmy

The MIT License (http://www.opensource.org/licenses/mit-license.php)