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.
- List thoughts
- Add thought
- Delete thought
- Clone repo
git clone [email protected]:atulmy/fullstack-graphql.git fullstack-graphql
- Install NPM modules API
cd api
andnpm install
- Install NPM modules Webapp
cd webapp
andnpm install
- Modify
/api/src/config/database.json
for database credentials - Modify
/api/src/config/config.json
for API port (optional) - Modify
/webapp/.env
for webapp port (optional) - Run API
cd api
andnpm start
, browse GraphiQL at http://localhost:3000/ - Run Webapp
cd webapp
andnpm start
, browse webapp at http://localhost:8000/
[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.
fullstack-graphql
โโโ api (api.example.com)
โ โโโ src
โ โ โโโ config
โ โ โโโ models
โ โ โโโ schema
โ โ โโโ setup
โ โ โโโ index.js
โ โ
โ โโโ package.json
โ
โโโ webapp (example.com)
โ โโโ public
โ โโโ src
โ โ โโโ components
โ โ โโโ setup
โ โ โโโ index.js
โ โ
โ โโโ .env
โ โโโ package.json
โ
โโโ .gitignore
โโโ README.md
- 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 modifytype.js
,resolvers.js
andfields/query.js
andfields/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
- Copy
- Adding new Module (Eg: Users):
- Create folder
users
under/webapp/src/components/
- Create your Container and Resusable components under
/webapp/src/components/users
- Create
api
folder under/webapp/src/components/users
- Add
actions.js
where all your Redux Action Types and Actions will reside (refer/webapp/src/components/thoughts/api/actions.js
) - Add
state.js
where all your respective Reducers will recide (refer/webapp/src/components/thoughts/api/state.js
) - Import the module state in
/webapp/src/setup/store.js
to make it avaliable to the app - Encapsulate all your User related code in
/webapp/src/components/users
- Create folder
- Adding new Route (Eg:
/users
):- Add a new entry to
routes
object in/webapp/src/setup/routes.js
(eguser: { list: '/list' }
) - Edit
/webapp/src/components/App.js
and add the route entry
- Add a new entry to
These queries are generated on client side using queryBuilder()
helper defined in /webapp/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", "createdAt": "Sat Oct 21 2017 15:53:05 GMT+0530 (IST)" }, { "id": 2, "name": "Jon Snow", "thought": "I know nothing", "createdAt": "Sat Oct 21 2017 15:55:00 GMT+0530 (IST)" } ] } } |
Query - Get List 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 } } } |
Atul Yadav - GitHub โข Twitter
Copyright (c) 2017 Atul Yadav http://github.com/atulmy
The MIT License (http://www.opensource.org/licenses/mit-license.php)