fullstack-graphql-angular icon indicating copy to clipboard operation
fullstack-graphql-angular copied to clipboard

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 + R...

logos

Fullstack GraphQL Angular

Created from 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

πŸ— 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
    }
  }
}