gem-hunter
Language: JavaScript
🌈 Simple Fullstack GraphQL Application. API built with Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL). WebApp built with React + Redux to access the API. Written in ES6 using Babel + Webpack.
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.
git clone git@github.com:atulmy/fullstack-graphql.git fullstack-graphqlcd api and npm installcd web and npm install/api/src/config/database.json for database credentials/api/src/config/config.json for API port (optional)/web/.env for web port (optional)cd api and npm start, browse GraphiQL at http://localhost:8000/cd web and npm start, browse web at http://localhost:3000/[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.
Video: MOV
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
/api/src/models/thought.js to /api/src/models/user.js and modify the file for table name and respective fieldsmodels object in /api/src/models/index.js/api/src/schema/thoughts to /api/src/schema/users and modify type.js, resolvers.js and fields/query.js and fields/mutations.js/api/src/schema/users/fields/query.js in /api/src/schema/query.js/api/src/schema/users/fields/mutations.js in /api/src/schema/mutations.jsusers under /web/src/components//web/src/components/usersapi folder under /web/src/components/usersactions.js where all your Redux Action Types and Actions will reside (refer /web/src/components/thoughts/api/actions.js)state.js where all your respective Reducers will recide (refer /web/src/components/thoughts/api/state.js)/web/src/setup/store.js to make it avaliable to the app/web/src/components/users/users):
routes object in /web/src/setup/routes.js (eg user: { list: '/list' })/web/src/components/App.js and add the route entryThese 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
}
}
}
|
Facebook Groups: NodeJS • ReactJS • GraphQL
Reddit: NodeJS • ReactJS • GraphQL
Following projects have been built with or inspired from fullstack-graphql
If you liked this project, please donate to support it ❤️
Copyright (c) 2017-18 Atul Yadav http://github.com/atulmy
The MIT License (http://www.opensource.org/licenses/mit-license.php)