⚡ Nx Angular GraphQL

• Nx monorepo with Angular app to display/add tasks from a NestJS backend API using Apollo GraphQL
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

📚 General info

• Nx workspace for both front and backends
• GraphQL typed schema used with code-generator to autogenerate frontend code
• Apollo Client stores the results of its GraphQL queries in a normalized, in-memory cache using the 'InMemoryCache' class
• Data-access library used to handle communication with the backend.
• Feature Tasks library with container components for displaying task data.

📷 Screenshots

📶 Technologies

• Nx v12 build framework used to create project workspace
• Angular framework v12 for frontend tasks view
• NestJS v7 for backend API
• GraphQL v15 API query language with graphql-tools
• npm Apollo Angular v2 to fetch task data from the GraphQL server and display it in the Angular UI
• npm apollo-server-express v2 Express and Connect integration of GraphQL Server
• GraphQL Code Generator v1 CLI tool & modules used to generate Typescript typings. libs/data-access/codegen.yml file configures the code generator
• Random image source - free placeholder images

💾 Setup

• Install dependencies using npm i
• Run nx dep-graph to see a diagram of the dependencies of the project.
• Run npm start api for a backend dev server. View GraphQL playground at http://localhost:3333/graphql
• Run npm start nx-angular-graphql for a frontend
• Run npm run lint to lint test entire client-side codebase using ESLint. All files pass.
• Run nx build nx-angular-graphql` to generate a build file

🔧 Testing

• tba

💻 Code Examples

• schema.graphql allTasks query and addTask mutation

type Task {
  id: Int!
  name: String
  deadline: String
  hours: Int
}

type Query {
  allTasks: [Task]
}

type Mutation {
  addTask(name: String, deadline: String, hours: Int): Task
}

🆒 Features

• monorepo organised libraries etc. makes for tidier code
• GraphQL interface

📋 Status, Testing & To-Do List

• Status: Working
• Testing: unit and end-end tests not completed
• To-Do: change deadline from simple string to a Date, change random image for icon? add detail to task?

👏 Inspiration/General Tools

• Nx documentation

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

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