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.

GraphQL resolvers act as controllers, mapping query and mutation schemas; implement field-level updates with scalar, object, enum, interface, union, and input types.

Define a GraphQL query schema and resolvers to fetch a single user by id or all users, using in-memory sample data and optional fields.

Learn to set up a GraphQL server with Apollo Server and GraphQL, configure typedefs and resolvers, start a standalone server (then Express later), and test with the browser dev tools.

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.

Set up a local Postgres database with Docker Compose or Render free Postgres service; configure user, password, database name, ports, and local or external access.

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.

Set up a config and database file to connect to Postgres from code, using dotenv and Sequelize, with options for render or local URLs and a dedicated connection function.

Set up a type-safe express server in TypeScript by creating a monitor server class and an HTTP server, then prepare health route caching and Apollo GraphQL integration.

Explore the Apollo server and GraphQL ecosystem, define schemas and resolvers, merge them with graphql-tools, and integrate Apollo server with express using the start method, introspection, and plugins.

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.

Implement an http health route separate from GraphQL using app.get('/health') to monitor the server during deployment, returning a simple uptime message when the server is running.

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.

Merge multiple GraphQL schemas with GraphQL tools to build a modular user schema and resolver, defining input and output types for login, register, social login, and check current user.

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.

Create a separate function for the register user mutation to reuse in login and auth social mutations, then sign a jwt and store it in the session.

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.

Implement the logout mutation in a Next.js GraphQL app by destroying the cookie session, returning null, and checking the current user with a follow-up query.

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.

Add auth data validations with the yup library for login, register, and social users, implemented on both client and server sides in the user resolvers and validations folder.

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.

Implement a get user notification groups GraphQL query with authentication, calling the notification service to fetch all notification groups, then test via GraphQL dev tools and login flow.

Explore implementing a GraphQL create notification group mutation to allow users to create notification groups, including the default contact group, returning a single notification and enabling client-side cache updates.

Implement a GraphQL update notification group mutation by adapting the create flow, converting the string notification id to int, and returning the updated notification.

Introduce a GraphQL delete notification mutation called delete notification group that takes a notification ID and returns the ID to update the client cache and notification list.

Begin by modeling the monitor with Sequelize, add interfaces, and then build the monitor service with create, get, update, toggle, and delete methods.

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.

Implement an async delete single monitor method that removes a monitor by id, user, and type, returning a promise of monitor documents, with a placeholder to delete related heartbeats.

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.

Define GraphQL query and mutation types for monitors, implementing get single monitor, get user monitors, auto refresh, and create, toggle, update, and delete monitor mutations.

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.

Add and test GraphQL monitor queries in a NextJS fullstack app, implementing get single monitor and get user monitors resolvers with monitor id and user id.

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

Create a monitor service with start monitors to manage http, tcp, mongo, and redis heartbeats using sleep and delays, and start it on server listen after the database is ready.

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.

Define a GraphQL subscription type to stream monitor updates over a web socket, wiring a single monitor_updated field returning monitor_response for real-time client updates.

Learn to implement a GraphQL subscription resolver using PubSub, define monitors updated, publish updates via PubSub.asyncIterator, and wire auto refresh with a cron job to push monitor data to clients.

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.

Create and fetch http heartbeats with a new http heartbeat service, implementing create and get by duration (6, 12, 24 hours) and using dayjs utc for timestamp filtering with Sequelize.

Implement http status monitor in the monitor service by exporting http status monitor, building a payload from the monitor document, and scheduling a cron job with start single job.

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.

Set up axios options, headers, and request logic to run http monitor heartbeats, build heartbeat records, and validate response content type, status, and timing for reliable monitoring.

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.

Test the HTTP heartbeat method by adding body null checks, adjusting failed HTTP assertion messages, and using error.response status to update heartbeat status via a health route and express server.

Create a get heartbeats method in the monitor service to fetch on-the-fly http heartbeats by duration, and expose a 16-item heartbeat slice via the GraphQL monitor resolver for the client.

Calculate monitor uptime from heartbeats by counting downtime heartbeats and computing a rounded uptime percentage, then apply it in the monitor service and resolver within a NextJS GraphQL app.

Delete a monitor and all its associated heartbeats and habits by checking the monitor type and invoking the delete mutation to remove related HTTP, MongoDB, and TCP models.

Define and integrate a heartbeats graphql schema and resolver, expose a getHeartbeats query with monitorId and duration, and wire the schema into the index.

Implement a GraphQL heartbeat resolver and add the get heartbeats query. Stringify the timestamp before sending to the client and test with a sample monitor ID and duration.

Build a MongoDB monitor model with a heartbeats table, mirroring the HTTP model, defining fields like monitor ID, status, code, message, timestamp, response time, and an index on monitor ID.

Build a MongoDB connection method that pings the database to verify the server is running, using the MongoDB driver in monitors.ts; return a monitor response with timing and status.

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.