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.

• Host: GitHub
• URL: https://github.com/rafaesc/fullstack-graphql-angular
• Owner: rafaesc
• License: mit
• Created: 2017-11-04T21:49:52.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-01T11:11:41.000Z (over 7 years ago)
• Last Synced: 2025-04-08T10:54:10.083Z (8 months ago)
• Topics: angular, angular2, expressjs, fullstack, graphql, graphql-client, graphql-schema, graphql-server, mysql, ngrx, nodejs, redux, sequelize, typescript
• Language: TypeScript
• Homepage:
• Size: 114 KB
• Stars: 65
• Watchers: 7
• Forks: 17
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• angular-awesome-list - Angular + Redux + Graphql + MySQL quickstart - Простое приложение совместно с GraphQL, Angular CLI + Redux + Express + GraphQL + Sequelize \(MySQL, Postgres, Sqlite, MSSQL\). (Awesome Angular [](https://github.com/gdi2290/awesome-angular) [](https://github.com/brillout/awesome-angular-components) / Angular <a id="angular"></a>)

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 git@github.com: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

    }

  }

}