⚡ Angular GraphQL API

Frontend: Angular used with GraphQL and Apollo Client to view the backend Engineering Parts data set
Backend: Node.js + GraphQL used with Apollo Server and GraphQL schema to execute queries on a data set
Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

⚡ Angular GraphQL API

📚 General info

Angular frontend uses the GraphQL module to fetch data via localhost port 4000
GraphQL used to query a mock Engineering parts db.js database with field reviews of parts and comments to improve the parts supply process
This was an idea of mine to link humdrum parts depots/maintenance to social media-like commenting from field personnel to flag up any problems with parts or their documentation.
Based on my time on engineering sites, where maintenance, spare parts, tools and related warehousing and manhours is big budget. Project costing was based on the weight of the modifications so this was vital data, e.g. weight of cables and cable-trays/cable-ladders.
Engineering parts are classified as critical parts or not with a Boolean criticalPart field.
Users can query, add, mutate (update) and delete parts, categories & field reviews

📷 Screenshots

📶 Technologies

Angular v16 javascript framework
Apollo Client v3 to fetch data via GraphQL
Tailwind CSS v3 styles
Node.js v18 Javascript runtime using the Chrome V8 engine
GraphQL v16 API query language
Apollo Server v3 for unified data communications
uuid v9 to create RFC4122 UUIDs

💾 Setup

Front & Back ends: npm i to install dependencies
Backend: cd Node-backend then npm run dev runs backend in the development mode with auto-restart after changes
Open http://localhost:4000 to access backend Apollo GraphQL Server
Frontend: (new terminal) cd Angular-frontend then npm run start runs frontend with auto-restart after changes
Open http://localhost:4200 to view frontend

🔧 Testing

Frontend tested using GraphQL backend data
Backend tested using GraphQL server Sandbox

💻 Code Examples

Backend: list of GraphQL mutations

 type Mutation {
  addCategory(input: AddCategoryInput!): Category!
  addPart(input: AddPartInput!): Part!
  addFieldReview(input: AddFieldReviewInput!): FieldReview!
  deleteCategory(id: ID!): Boolean!
  deletePart(id: ID!): Boolean!
  deleteFieldReview(id: ID!): Boolean!
  updateCategory(id: ID!, input: UpdateCategoryInput!): Category
  updatePart(id: ID!, input: UpdatePartInput!): Part
  updateFieldReview(id: ID!, input: UpdateFieldReviewInput!): FieldReview
 }

🆒 Features

GraphQL query only returns the data specified, unlike REST queries that return everything

📋 Status, Testing & To-Do List

Status: Basic Front and Backends working
To-Do: Add CMS API or POSTgreSQL database. Add frontend queries etc styling, Tailwind cards or table for data

andrewjbateman / angular-graphql-api Goto Github PK

angular-graphql-api's Introduction

⚡ Angular GraphQL API

📄 Table of contents

📚 General info

📷 Screenshots

📶 Technologies

💾 Setup

🔧 Testing

💻 Code Examples

🆒 Features

📋 Status, Testing & To-Do List

👏 Inspiration

📁 License

✉️ Contact

angular-graphql-api's People

Contributors

Stargazers

Watchers

Recommend Projects

Recommend Topics

Recommend Org