GraphQL with NextJS - Build a Fullstack App From Scratch

Learn how GraphQL, a query language and runtime for APIs, delivers exactly the data you request and uses schemas, types, resolvers, queries, and mutations.

Explore GraphQL schemas and types, including non-nullable fields with exclamation marks, scalar types, and the user and address examples, then introduce resolvers, queries, and mutations.

Define and implement GraphQL mutations with Apollo Server to update and delete users, and expose get all users queries that return users and addresses for a Next.js app.

Learn how to add and use GraphQL field resolvers to manipulate specific fields, such as converting string data to integers and formatting dates, within queries and mutations.

Connect local Postgres (via docker compose) and the render database with TablePlus, configuring host, port 5432, user, and database name, then test the connections.

Learn to bootstrap the up timer server for a GraphQL Next.js app by initializing npm, installing express, cors, bcrypt, TypeScript, and tsconfig, creating folders, and wiring build and dev scripts.

Integrate Apollo Server with an Express app using the Express middleware, configure CORS and JSON handling, expose a /graphql route, and pass request and response via context to resolvers.

Install and configure the Pinot logger in your Next.js fullstack app, replacing console logs with a dedicated logger in the server, and use it to log database connections and errors.

Develop user service methods to interact with a Postgres database via Sequelize for GraphQL resolvers, including create, fetch by username or email, omit passwords, and get by social id.

Learn how to build a notification service with full CRUD in a GraphQL and Next.js app, including create, get, update, and delete operations for notification groups using Sequelize.

Move the user.ts into a schema folder, create an index.ts to merge schemas with merge type devs, and wire typedefs and resolvers in the server.ts.

Build the register user mutation in GraphQL by creating a resolver and typing the context with request and response. Validate input, check for existing users, and create a new user.

Implement and test the register user mutation in a GraphQL with Next.js app, wiring auth responses with user and notifications, signing the token, and connecting the database.

Fix the createdAt issue in the register user mutation with GraphQL by returning createdAt from the user document, converting it to a string, and verifying persistence in development.

Build a login user mutation in GraphQL that accepts username or email and password, validates input, checks the user by type, compares passwords, and returns login tokens and session data.

Create a social auth mutation that accepts a social id, type (facebook or google), username, and email; it checks by social ID and logs in or creates a new user.

Create authenticateGraphQLRoutes in utils.ts to verify the JWT in the request session, set request.currentUser from the payload, and protect GraphQL routes with error handling.

Learn how to build a notification schema with GraphQL in a Next.js app, creating input and output types, and implementing resolvers for create, get, update, and delete notification groups.

Define the monitor interface and model using sequelize, wiring fields like id, notificationId, userId, name, active, status, frequency, and alertThreshold for a Postgres setup.

Define a monitor model for a NextJS GraphQL app, detailing fields like timeout, uptime, redirects, method, headers, body, auth, content type, status code, response time, ports, and user ID index.

Learn to build a monitor service in a fullstack app with GraphQL and NextJS: create monitors, fetch all user monitors, filter active ones, and fetch by id with notification group.

Implement toggle and update methods in the monitor service, including update status using 0 for success and 1 for error, with user-specific monitor retrieval.

Learns to add and export a monitor GraphQL schema, define monitor and heartbeats input/output types, and set up fields for client-server communication with future queries, mutations, and subscriptions.

Learn to implement a GraphQL create monitor mutation resolver in a NextJS app using TypeScript, including authentication, active-start logic, and resolving input/output type name clashes.

Learn to implement cron-based monitor scheduling in a GraphQL with Next.js app by setting up cron jobs with Chrono, handling time zones, and creating start and stop utilities.

Implement the toggle monitor mutation to flip a monitor's active state and manage the cron job accordingly. It passes monitor id, user id, name, and active to toggle the monitor.

Create update and delete monitor mutation resolvers for a GraphQL Next.js app, passing monitor id, user id, and monitor input to update or delete a monitor and return its id.

Implement field resolvers for monitor results in a GraphQL with Next.js app, converting last changed to string, parsing response time to integer, and returning notifications for monitor objects.

Enable the auto refresh query via a client button to automatically fetch updated heartbeats from the backend using subscriptions, without reloading the page.

Toggle the auto refresh according to whether monitors are active. Stop the background job on the server when no active monitors remain, and update the user interface accordingly.

Test GraphQL subscriptions in the dev tool by wiring a subscription with the pub sub setup, enabling auto refresh, and validating active monitors updates every 10s via WebSocket.

Enable automatic refresh for the web socket by extracting the session token from the cookie in the request headers and triggering the start single job on restart.

Enable auto refresh - Part 2 shows how to read the session from a cookie in the WebSocket request, verify the JWT, and conditionally start a cron job on server restart.

Create a universal heartbeat interface for all monitors and implement an HTTP monitor with its own HTTP_heartbeats table, detailing monitor id, status, code, time stamp, headers, bodies, and response time.

build an http monitor heartbeat (part 1) using axios, creating an http monitor class with error counting, alerting, and flexible auth, timeout, and post body handling.

Implement error and success http heartbeat assertions within a monitor service, updating monitor status, creating heartbeats, handling alert thresholds, and preparing email alerts.

Handle http monitor errors by recording http heartbeat failures, updating monitor status and data, capturing response details and timestamps, and sending email alerts when axios requests fail.

Adapt the HTTP monitor to build a MongoDB monitor, implementing heartbeat checks, monitor data with response time, status, code, and message, and alerting via email when error thresholds are exceeded.

create a mongodb service in a next.js graphql fullstack app, implementing mongo heartbeats and a mongo status monitor with a get heartbeats by duration method.

Learn to test a MongoDB monitor by spinning up a MongoDB container with Docker Compose, configuring the local URL and port 27017, and validating heartbeats and connection status.