Build a Real Time Chat App With React + NestJS & GraphQL

Create a React app with TypeScript template, build a chat UI using Material UI and icons, enable dark mode with a theme provider and container, and run on port 3000.

Implement GraphQL user create, read, update, and delete via bcrypt hashing of passwords, and updated inputs, using the user repository for create, read, update, and delete operations in MongoDB.

Fix the update user mutation by hashing the password only when provided, avoiding undefined password errors, and validate updates via login and credentials in GraphQL with bcrypt and JWT.

Create a useCreateUser hook with Apollo Client to execute the GraphQL createUser mutation from a createUserInput (email and password) and return the user’s id and email.

Configure nestjs jwt with a secret and expiration, create a token payload with id and email, generate a JWT, and set an HTTP-only authentication cookie.

Guard routes with an auth check and redirect to login on 401 GraphQL responses. Implement a logout link in Apollo that resets the store and navigates to login.

Learn to implement a logout feature by clearing the httpOnly JWT cookie via a backend /auth/logout route and refreshing the client store after redirecting to the login page.

Create a real-time chat backend using NestJS, GraphQL code-first, and Mongo, building chats module, chat entity, repository, and a create mutation guarded by authentication.

Generate type-safe GraphQL types for your React UI with the GraphQL code generator, watch for schema changes, and apply auto-generated types to a create chat mutation.

Retrieve and display chats in the app by implementing a chat resolver, creating a get chats hook, and using GraphQL fragments to fetch all chat data for the chat list.

Update the Apollo client cache after creating a chat by using useMutation's update, cache.modify, and writeFragment to append the new chat to the chats query and refresh the UI.

Implements a cleanup of the add chat flow by awaiting chat creation, closing the modal on success, removing dummy chats, and enforcing required chat name validation with error handling.