⚡ 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
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔧 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status, Testing & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 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

👏 Inspiration

• Apollo Docs: Get started with Apollo Server

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com