GraphQL with React & Node js - Real Time Private Chat App

Set up a fresh project with Apollo Server, define a schema and resolvers for a hello world query, run the Node server, and test in the GraphQL playground.

Build and query a GraphQL user schema with resolvers, defining a user type (id, first name, last name, email) and using variables and the playground to fetch data.

Explore how to design and implement mutations in GraphQL, including creating input types, handling variables, and returning new user data in a real-time chat app context.

Learn how the parent argument enables resolving relational data in GraphQL by using resolve to access parent, args, and context, and filter related todos by user id.

Share data across resolvers using context and implement authentication logic to control access. Reduce repetition with fragments and aliases when querying users and mutations.

Set up Prisma and the user model, connect a relational database with MySQL, and use migrate or push to create and manage the user table for a real-time chat.

Create a signup mutation to register a new user, enforce unique email, hash passwords with bcrypt, and persist the new user using Prisma within a GraphQL resolver.

Enable sign in mutation in GraphQL with React and Node, validate email and password, and issue a JWT token using a secret key for secure authentication.

Explore how JWT-based authentication protects protected resources by issuing a JWT after sign-in and validating it via the authorization header to grant access.

Implement authorization in a GraphQL app by using a context middleware to read and verify JWT tokens from request headers, protecting resources and returning only other users.

Build a message model with sender and receiver relationships and a created at timestamp, linking to user table, then preview via prisma studio and prepare a mutation to send messages.

Introduce the GraphQL sendMessage mutation with a schema and resolver, return the created message, validate inputs, and persist with Prisma for a real-time private chat app.

Write a GraphQL query to fetch messages between two users, filtering by sender and receiver with Prisma and ordering by created time ascending. Ensure the user is logged in.

Create a fresh React app using create react app and install dependencies. Install material UI, Roboto font, icons, and react-router-dom, then set up the code editor and project structure.

Build a sign up page UI in React with Material UI components such as Box, Stack, Typography, and TextField; manage form data with useState and handle onChange and submit.

Implement a login page user interface by wrapping inputs in a card, hiding first and last name, and toggling between log in and sign up with state and outline borders.

Create a sidebar component for the real-time private chat app, display a list of users with avatars, and render user cards using typography and dividers on the home screen.

Implement routing in a React and Node real-time chat app by wrapping the app with BrowserRouter, defining routes, and navigating to user screens using id and name parameters.

Build a chat screen UI with Material UI components, including a toolbar header, avatar and typography, message bubbles, and a bottom text input with left-right message alignment.

Add a logout option by placing a logout icon in the sidebar and importing material icons, then align them in a stack with space-between for a clean real-time chat UI.

Compare using Apollo client versus fetch for GraphQL data in a React app; demonstrate posting queries with fetch, headers, and tokens. Explain how Apollo aids state management and caching.

Install and configure Apollo client in a React app by following the official docs, set version 3.5.10, initialize the client, wrap the app with ApolloProvider, and enable hooks.

Learn how to implement the useMutation hook to sign up users with a GraphQL mutation in a React and Apollo setup, managing loading, data, and errors.

Implement login mutation and logout in a GraphQL React app, validate input, store JWT in local storage, and switch to the home screen while clearing the token on logout.

Learn to fetch protected GraphQL data with React using Apollo's useQuery, attaching auth tokens in headers and exploring cache-first and cache-and-network policies.

Show dynamic messages on the chat UI by querying messages by user with GraphQL in a React app, handling loading and errors and formatting the created date.

Learn to send a text message from the UI by binding a text input to state, wiring a send button, and executing a mutation to update messages.

Configure graphql-ws with Apollo Server Express to enable real-time subscriptions over web sockets, migrate to Apollo Server Express, install graphql-ws, and build an executable schema.

Design a subscription schema and resolver using PubSub and an asyncIterator to publish and broadcast new messages added in real time to all subscribers.

Test GraphQL subscriptions in playground to verify real-time message broadcasting in a React and Node.js chat app. Subscribe to message added on websocket and observe broadcasts.

Set up Apollo client on the client side to enable subscriptions for real-time chat, installing GraphQL, configuring a split link with a web socket for subscription operations, and aligning versions.

Implement real-time notifications by using the useSubscription hook in a GraphQL with React and Node app, subscribing to message events and updating the UI automatically.

Learn to inspect web socket requests in the browser network tab, observe init connection, message added, and subscriptions, and see how logout stops listening to real-time chat events.

Fixes a real-time chat bug by updating the client to display messages only for the logged-in user, decoding the user id from locally stored JWT, and gating updates by sender.

Deploy Apollo server on Heroku, configure the port from process.env.PORT, and connect to a Heroku Postgres database with environment variables such as JWT secret.

Deploy the apollo client react app to heroku by configuring build packs for react and node, secure websockets, and pushing to the heroku master to publish online.