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 · World Congress 2024

1:27 min

Summary of modern Next.js web development toolchains

Marius Obert Marius Obert · World Congress 2023

3:06 min

Leveraging the Next.js framework for performance improvements

Eileen Fürstenau Eileen Fürstenau · World Congress 2024

1:38 min

Selecting Next.js for hybrid static and server rendering

Dino Lozina · World Congress 2022

1:33 min

Choosing Vue and GraphQL for strong typings

Abdelrahman Awad Abdelrahman Awad · World Congress 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
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

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

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

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
World Congress 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
World Congress 2024 • about 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 • over 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
World Congress 2022 • over 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.