React Summit US

React Summit US 2023

Today's Talk is about using suspense and GraphQL with Apollo Client to create smooth user experiences. The Talk covers the introduction and power of suspense, the new Used Suspense Query hook in Apollo Client, updating components with suspense, using suspense boundaries and tradeoffs, optimizing playlist fetching with GraphQL, loading more tracks and using transitions, and concluding remarks and future developments.

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.

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

Jerel Miller

Alessia Bellisario

This talk discusses the best practices for fetching data during the initial render of a component in React. It emphasizes the importance of fetching in advance and avoiding fetching twice. The talk also highlights the need for an external cache to store information about API calls and the use of a cleanup function to avoid memory leaks. Additionally, the speaker mentions their library, react-disposable-state, which can be used for making side effects during render.

What is suspense for data fetching in React? Why does React's model make creating network requests during render so difficult? Why does (to the presenter's knowledge) no library besides Relay support this, despite its sheer convenience?
 In this talk, Robert will discuss how React renders components (especially with regards to Suspense), and how to build a data-fetching library that functions correctly in light of those behaviors. Then, with all the pieces in place, we'll use a library, @boulton/react-disposable-state, to roll our own suspense-compatible data fetching!

#react query suspense