WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
JavaScript Congress • Nov 23, 2021

GraphQL + Apollo + Next.js: A Lovely Trio

Josh Goldberg

Josh Goldberg reveals how combining Next.js, GraphQL, and Apollo creates the ultimate type-safe frontend. Eliminate data over-fetching and automate your TypeScript workflows with this modular stack.

Pause
Mute Enter Fullscreen
#1 about 2 min

Introduction to the GraphQL, Apollo, and Next.js stack

An overview of combining GraphQL, Next.js, and Apollo to build modern web applications.

#2 about 5 min

Scaffolding pages and routing single-page applications with Next.js

How Next.js manages view state and accelerates performance through single-page application and prefetching.

#3 about 6 min

Fetching data using static and server-side Next.js props

Implementing performant data loading utilizing static site generation, incremental static regeneration, and server-side rendering.

#4 about 2 min

Building dynamic router paths inside a Next.js application

How to use file-based dynamic routes and extract query parameters using the Next.js router hook.

#5 about 3 min

Configuring automatic TypeScript support for Next.js applications

How Next.js automatically detects and configures TypeScript compilation while providing precise property types for server loading.

#6 about 4 min

Defining data requirements using GraphQL schema and queries

How GraphQL replaces traditional REST APIs by enabling clients to request precise data shapes utilizing strongly typed schemas.

#7 about 4 min

Creating API endpoints with GraphQL schemas and backend resolvers

Connecting GraphQL queries to backend systems by writing resolvers that supply the necessary data independently.

#8 about 2 min

Executing reusable GraphQL queries using dynamically localized variables

How to inject dynamic parameters into queries for improved reusability and type checking within GraphiQL environments.

#9 about 2 min

Modifying application data points using typed GraphQL mutation operations

Defining and executing server-side data updates while retaining comprehensive GraphQL type validation and editor feedback.

#10 about 4 min

Generating strict TypeScript definitions from external GraphQL schemas

Utilizing the GraphQL Code Generator plugin to emit type-safe operations and hooks automatically from yaml configurations.

#11 about 4 min

Integrating backend GraphQL queries into React interfaces with Apollo

Integrating Apollo Client inside a Next.js provider context to run auto-generated data hooks natively within React components.

#12 about 4 min

Embracing composable architecture within the modular JavaScript framework ecosystem

Why single-purpose tools like React and Next.js scale effectively by allowing developers to compose optimal module infrastructure.

#13 about 3 min

Combining multiple REST services and configuring application layer authentication

Strategies for unifying multiple REST microservices underneath a single GraphQL resolver endpoint using schema federation.

Matching moments

5:05 min

Demonstrating Data API Builder with a React front end

Sander ten Brinke Sander ten Brinke · WWC 2024

1:27 min

Summary of modern Next.js web development toolchains

Marius Obert Marius Obert · WWC 2023

3:06 min

Leveraging the Next.js framework for performance improvements

Eileen Fürstenau Eileen Fürstenau · WWC 2024

1:38 min

Selecting Next.js for hybrid static and server rendering

Dino Lozina · WWC 2022

1:33 min

Choosing Vue and GraphQL for strong typings

Abdelrahman Awad Abdelrahman Awad · WWC 2025

3:52 min

Hands-on demo of the Neo4j GraphQL library

William Lyon · LIVE

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
over 4 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail
40:45
over 4 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
over 4 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
over 4 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
over 4 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
over 4 years ago

JavaScript the Grumpy Parts

Rob Richardson

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

GitHub’s Team X-Ray: Your Repository Knows More About Your Team Than Your Team Does

Andrea Griffiths

Senior Developer Advocate

Andrea Griffiths

Related videos

Putting the Graph In GraphQL With The Neo4j GraphQL Library thumbnail
47:48
LIVE • almost 5 years ago

Putting the Graph In GraphQL With The Neo4j GraphQL Library

William Lyon

Rethinking Reactive Architectures with GraphQL thumbnail
41:06
LIVE • over 5 years ago

Rethinking Reactive Architectures with GraphQL

David Leitner

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners thumbnail
29:01
WWC 2023 • almost 3 years ago

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners

Marius Obert

GraphQL: Does it replace SQL, REST or Something Else? thumbnail
28:12
WWC 2024 • almost 2 years ago

GraphQL: Does it replace SQL, REST or Something Else?

Gregor Bauer

GraphQL Mesh – Why GraphQL between services is the worst idea and the best idea at the same time! thumbnail
34:28
LIVE • about 6 years ago

GraphQL Mesh – Why GraphQL between services is the worst idea and the best idea at the same time!

Uri Goldshtein

Next, Nest, Nuxt… Nust? thumbnail
26:30
WWC 2022 • about 4 years ago

Next, Nest, Nuxt… Nust?

Marius Obert

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.