An open API service indexing awesome lists of open source software.

https://github.com/rafaesc/fullstack-graphql-angular

Simple Fullstack GraphQL Application with Angular CLI + Redux. API built with Typescript + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL). WebApp built with Angular CLI + Redux + Async Middleware to access the API.
https://github.com/rafaesc/fullstack-graphql-angular

angular angular2 expressjs fullstack graphql graphql-client graphql-schema graphql-server mysql ngrx nodejs redux sequelize typescript

Last synced: 4 months ago
JSON representation

Simple Fullstack GraphQL Application with Angular CLI + Redux. API built with Typescript + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL). WebApp built with Angular CLI + Redux + Async Middleware to access the API.

Awesome Lists containing this project

README

        

![logos](http://rafaelescala.com/assets/fullstack.png)

# Fullstack GraphQL Angular
>Created from [fullstack graphql](https://github.com/atulmy/fullstack-graphql), implement additional support for Typescript, Angular CLI and ngrx.

Simple Demo Application

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

**WebApp** built with Angular CLI + Redux + Async Middleware.

Written in Typescript using Babel + Angular CLI.

## πŸ“ Features
- [x] List thoughts
- [x] Add thought
- [x] Delete thought
- [x] View single thought

## ▢️ Running
- Clone repo `git clone [email protected]:rafaesc/fullstack-graphql-angular.git fullstack-graphql-angular`
- Install NPM modules API `cd api` and `npm install`
- Install NPM modules Webapp `cd webapp` and `npm 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`, `npm run build` and `npm start`, browse GraphQL at http://localhost:3000/
- Run Webapp `cd webapp` and `npm start`, browse webapp at http://localhost:4200/

### 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
![screenshot](http://rafaelescala.com/assets/fullstack.gif?v=0.2)

## πŸ— Core Structure
fullstack-graphql-angular
β”œβ”€β”€ api (api.example.com)
β”‚ β”œβ”€β”€ src
β”‚ β”‚ β”œβ”€β”€ config
β”‚ β”‚ β”œβ”€β”€ models
β”‚ β”‚ β”œβ”€β”€ schema
β”‚ β”‚ β”œβ”€β”€ setup
β”‚ β”‚ └── index.js
β”‚ β”‚
β”‚ └── package.json
β”‚
β”œβ”€β”€ webapp (example.com)
β”‚ β”œβ”€β”€ public
β”‚ β”œβ”€β”€ src
β”‚ β”‚ └── app
β”‚ β”‚ β”œβ”€β”€@core
β”‚ β”‚ β”œβ”€β”€@shared
β”‚ β”‚ β”œβ”€β”€pages
β”‚ β”‚ └──app.module.ts
β”‚ β”‚
β”‚ └── package.json
β”‚
β”œβ”€β”€ .gitignore
└── README.md

## πŸ“˜ Guides
### API
- Adding new Module (Eg: Users):
- Copy `/api/src/models/thought.ts` to `/api/src/models/user.ts` and modify the file for table name and respective fields
- Add an entry to the `models` object in `/api/src/models/index.ts`
- Copy `/api/src/schema/thoughts` to `/api/src/schema/users` and modify `type.ts`, `resolvers.ts` and `fields/query.ts` and `fields/mutations.ts`
- Import `/api/src/schema/users/fields/query.ts` in `/api/src/schema/query.ts` and add user to the fields
- Import `/api/src/schema/users/fields/mutations.ts` in `/api/src/schema/mutations.ts` and add user to the fields
- To activate these changes do `cd api`, `npm run build` and `npm start`

### Webapp
- Adding new Module (Eg: Users):
- Create folder `users` under `/webapp/src/app/pages/`
- Create your Module and Component under `/webapp/src/app/pages/users`
- Add `users.action.ts` where all your Redux Action Types and Actions will reside (refer `/webapp/src/app/@shared/store/actions/users.action.ts`)
- Add `users.reducer.ts` where all your respective Reducers will recide (refer `/webapp/src/@shared/store/reducers/users.reducer.ts`)
- Add `users.service.ts` where all your respective Services will recide (refer `/webapp/src/@shared/services/users.service.ts`)
- Add `users.effect.ts` where all your respective Effects will recide (refer `/webapp/src/@shared/store/reducers/users.effect.ts`)
- Import the module state in `/webapp/src/@shared/store/` to make it avaliable to the app
- Import the Users Effect in `/webapp/src/@core/core.module.ts`
- Encapsulate all your User related code in `/webapp/src/app/pages/users`
- Adding new Route (Eg: `/users`):
- Add a new entry to `PAGES_ROUTES` object in `/webapp/src/app/pages/pages.routing.ts`

## Sample GraphQL Queries
These queries are generated on client side using `queryBuilder()` helper defined in `/webapp/src/app/@shared/utils/helpers.ts`




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
}
}
}