GitHub - atulmy/fullstack-graphql: Simple Fullstack GraphQL Application. API bui...
source link: https://github.com/atulmy/fullstack-graphql
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 [email protected]:atulmy/fullstack-graphql.git fullstack-graphql
- Install NPM modules API
cd api
andnpm install
- Install NPM modules Webapp
cd web
andnpm 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
andnpm start
, browse GraphiQL at http://localhost:8000/ - Run Webapp
cd web
andnpm 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
- 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
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
- Create folder
- Adding new Route (Eg:
/users
):- Add a new entry to
routes
object in/web/src/setup/routes.js
(eguser: { list: '/list' }
) - Edit
/web/src/components/App.js
and add the route entry
- Add a new entry to
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
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)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK