How to Use Suspense and GraphQL with Apollo to Build Great User Experiences

Rate this content
Bookmark
The video discusses how to use Suspense and GraphQL with Apollo Client to build user-friendly applications. It starts with an overview of React Suspense concepts and demonstrates how to create a smoother user experience using Apollo Client's new Suspense hooks. The focus is on the Use Suspense Query hook in Apollo Client 3.8, which integrates with React 18 Suspense to manage transitions in applications effectively. The video also covers the defer directive in GraphQL, which allows parts of a query to be fetched and rendered asynchronously, improving performance. Additionally, it discusses the Start Transition feature in React, which marks updates as low priority to maintain the existing UI while fetching new data. The talk emphasizes the importance of strategic placement of Suspense boundaries to optimize user experience. The upcoming features in Apollo Client 3.9, including a suspenseful version of the use fragment hook and a lazy version of UseBackgroundQuery, are also highlighted.

From Author:

For many app developers, GraphQL is instrumental in building great user experiences. With the introduction of React Suspense, developers have an ergonomic way to orchestrate loading states to improve upon the status quo. 


In this talk, the Apollo Client team will show you how we built a non-trivial application using Apollo Client’s new Suspense features, GraphQL features like the @defer directive, and how to combine them to build great user experiences in your own apps.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

Apollo Client's new suspense feature, released in version 3.8, integrates with React 18 Suspense to manage and coordinate transitions in applications smoothly. It provides a more seamless user experience by handling UI states during data fetching more effectively.

Using React Suspense with Apollo Client helps in reducing unnecessary loading states and coordinating UI transitions smoothly. It improves the overall user experience by minimizing the jarring effects of data fetching and rendering in a web application.

Use Suspense Query is a hook introduced in Apollo Client 3.8 that replaces the traditional useQuery hook for fetching data. It is designed to work with React 18 Suspense and does not manage loading states directly within components, instead relying on React Suspense boundaries to handle loading UIs.

Implementing suspense support in a data fetching library is complex because it involves intricate management of loading states, error handling, and UI transitions. This complexity arises from the need to seamlessly integrate these elements while maintaining performance and user experience.

Apollo Client's suspense feature handles transitions by using React 18's support for suspense and transitions. This allows developers to define suspense boundaries in their applications that manage how components wait for data and transition new views into the UI.

The defer directive in GraphQL allows parts of a query to be fetched and rendered asynchronously. This improves performance by allowing initial parts of the UI to load without waiting for slower parts of the data fetch, thus reducing perceived load times and improving user experience.

Apollo Client uses React's Start Transition feature to mark updates as low priority. This allows the application to maintain the existing UI while new data is fetched in the background, improving the user experience during interactions like infinite scrolling or loading additional data.

Jerel Miller
Jerel Miller
Alessia Bellisario
Alessia Bellisario
27 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Transcription

1. Introduction to Suspense and Apollo Client

Short description:

Today we'll be talking about how to use suspense and GraphQL with Apollo Client to build great user experiences. We'll start with an overview of React Suspense concepts and then explore a real client rendered application using Apollo Client's new suspense hooks. We won't cover React Server Components and Streaming SSR, but you can check out our experimental package for more information. Andrew Clarke's tweet about iOS transitions sets the stage for the relevance of suspense. Suspense helps coordinate transitions in our app for a smoother user experience. We'll also discuss the use query hook in Apollo Client.

Hi, everyone. So today we'll be talking about how to use suspense and GraphQL with Apollo Client to build great user experiences. But first, let's quickly introduce ourselves. So I'm Gerald Miller. I'm a principal software engineer at Apollo GraphQL, working as a maintainer on Apollo Client. And you can find me online at Gerald Miller. And my name is Alessia Bellacerio. I'm a staff software engineer also working on Apollo Client, and you can reach me at AlessBell.

So first we'll be starting with what this talk is about. And we'll begin with a brief overview of React Suspense concepts. Then we'll look at a real client rendered application that's using Apollo Client's new suspense hooks, officially released in August of this year, to see what can be gained from pairing these technologies. And also importantly, let's talk about what we're not going to talk about today, which is React Server Components and Streaming SSR. While super cool, and a lot of great things happening there, just not something we have time to touch on. If you are interested in those, we highly encourage you to check out our experimental package at Apollo Experimental of XJS App Support. Shout out to our co-maintainer, Lenz, who has done a lot of the legwork in this. Also, we're not going to be talking about implementing suspense support in a data fetching library, because trust us, it's actually a little more complicated than meet-CI.

Okay, so let's go back to January 2018 when Andrew Clarke tweeted this out. Andrew Clarke is a member of the core React team, who's currently working at Percel. And this tweet was sent out into the universe January 2018, as I said, more than a month before Dan Abramoff would deliver his JSConf Iceland talk titled, Beyond React 16, with some of the first public demos of suspense. And I think this is a good place to start, because what Andrew is talking about here is very relevant to suspense and what we'll be showing you. Andrew said, one reason iOS feels so much nicer than the web, fewer unnecessary loading states. Look what happens when you tap an option in the settings app in iOS. Instead of transitioning the view immediately and showing a fallback spinner for a split second, it pauses for a moment, prepares the view. When the view is ready, it slides in. And it just feels so much smoother than if you would see a flash of a spinner. So, this is one of the things that Suspense helps us do, coordinate these transitions in our app for a really, really nice end user experience. First, let's talk a little bit about the status quo today. So, for those of you that have used Apollo Client for any amount of time, you should be familiar with the use query hook. So, we're going to start taking a look at just an example that uses use query, that should look familiar to all of us here. So, with a hook like use query, you're fetching a list of albums, and the important thing to note here is that the use query hook is going to give you this loading boolean.

2. Understanding the Power of Suspense

Short description:

Our albums component renders the loading fallback until data is returned from the network request. Suspense is more than just showing a different fallback UI. It provides powerful tools for managing transitions and creating a smooth user experience.

And so, our albums component that is going to be rendered when we click this button here is going to be responsible for rendering the loading fallback until the data is returned from our network request, and we see that dreaded flash of a spinner here.

One thing before we look at some practical examples, dive into a demo, that we wanted to note here is that we're going to be talking a lot about loading states in this talk. But to reduce suspense to just, you know, this notion that suspense is just about showing and a different way of showing your fallback UI in your app, would miss the core value prop of suspense entirely.

And so that's another takeaway that we hope you have today. That suspense gives us these really powerful tools for managing and coordinating transitions in our app, beyond just the initial loading experience or the UX on navigation, et cetera, but it's really just these transitions that are so fundamental to how the user is experiencing your app and making those as pleasant, as smooth as possible.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.
Rock Solid React and GraphQL Apps for People in a Hurry
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Rock Solid React and GraphQL Apps for People in a Hurry
The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.
Adopting GraphQL in an Enterprise
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
Adopting GraphQL in an Enterprise
Today's Talk is about adopting GraphQL in an enterprise. It discusses the challenges of using REST APIs and the benefits of GraphQL. The Talk explores different approaches to adopting GraphQL, including coexistence with REST APIs. It emphasizes the power of GraphQL and provides tips for successful adoption. Overall, the Talk highlights the advantages of GraphQL in terms of efficiency, collaboration, and control over APIs.
Step aside resolvers: a new approach to GraphQL execution
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
GraphQL has made a huge impact in the way we build client applications, websites, and mobile apps. Despite the dominance of resolvers, the GraphQL specification does not mandate their use. Introducing Graphast, a new project that compiles GraphQL operations into execution and output plans, providing advanced optimizations. In GraphFast, instead of resolvers, we have plan resolvers that deal with future data. Graphfast plan resolvers are short and efficient, supporting all features of modern GraphQL.

Workshops on related topic

Concurrent Rendering Adventures in React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
Getting Started with Suspense and Concurrent Rendering in React
React Summit 2020React Summit 2020
125 min
Getting Started with Suspense and Concurrent Rendering in React
Featured Workshop
Maurice de Beijer
Maurice de Beijer
React keeps on evolving and making hard things easier for the average developer.
One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the `<Suspense />` component makes life much easier.
Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this.
You will learn all about using <Suspense />, showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable combining it with concurrent rendering, the `useTransition()` hook and the <SuspenseList /> component.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL for React Developers
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
Roy Derks
Roy Derks
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.