React Advanced

React Advanced 2023

This Talk discusses the journey of data fetching libraries in React's new streaming SSL, focusing on the use of suspense for data fetching. It covers the backstory of suspense and data fetching, the plan and green light for its implementation, challenges with Next.js app router and SSR, data transport and flushing timing, the importance of timing and data transport, delayed rehydration and stream closure, the need for remaining data and required functionalities, challenges faced by vanilla React users, and audience questions about React server components.

If you use the Next.js app directory, you might not even have noticed it, but you are not only using React Server Components, but you are also using the new streaming SSR feature of React.That means that on first page load, your Client Components will now be server-side rendered, suspense boundary by suspense boundary, and constantly streamed to the client, where they are rehydrated piece-by-piece. If you combine that with suspense for data fetching in your client components, you will suddenly be facing hydration mismatches - as your client components will start fetching data on the server, but the data will not be transported to the client. In this talk, I will go over the rocky journey that we had to go through to support suspense for data fetching in Streaming SSR with Apollo Client, looking at all the curious timing problems that come up with these technologies, and how we try to solve them as best as we can - always with the best possible user and developer experience in mind.

The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR

Lenz Weber-Tronic

This Talk discusses using suspense and GraphQL with Apollo client to build great end user experiences. It explains the core concepts of React suspense and how to fetch data in suspense with Apollo client's new suspense hooks. The Talk also covers optimizing the loading experience by adding suspense boundaries, using the defer directive in GraphQL, and integrating suspense hooks with React 18 transitions. Future plans include new APIs like suspenseful use fragment and lazy use background query in Apollo client 3.9. Testing strategies for suspense in components and customizing loading states are also mentioned.

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

React Summit

React Summit 2022

This Talk discusses various aspects of Apollo Cache in GraphQL and Apollo Client 3. It covers topics such as cache fetch policies, normalization, updates, and garbage collection. The importance of proper data storage and management in the cache is emphasized. The Talk also explores the challenges of managing lists and the need for custom update functions. Overall, it provides insights into optimizing the performance and efficiency of Apollo Cache in software development.

In this talk, I plan to discuss how the apollo cache works in practice, how important ID's are to the process and how one can leverage it (through the way they query/mutate and through schema design). To add to this I want to share some caching patterns and best practices used at Shopify and beyond to solve problems.

The Apollo Cache is Your Friend, if You Get To Know It

Raman Lally

Node Congress

Node Congress 2022

Welcome to the Database Workflows and API Development with Prisma workshop. Prisma is an ORM that allows you to work with a relational database from an object-oriented programming language. The workshop covers topics such as data modeling, migrations, using Prisma Client for querying the database, and implementing REST and GraphQL APIs. It also highlights the benefits of Prisma, including its intuitive data modeling language, type-safe database client, and migration tool. The workshop provides hands-on tasks and guidance for beginners to get started with Prisma.

Prisma is an open-source ORM for Node.js and TypeScript. In this workshop, you’ll learn the fundamental Prisma workflows to model data, perform database migrations and query the database to read and write data. You’ll also learn how Prisma fits into your application stack, building a REST API and a GraphQL API from scratch using SQLite as the database. Table of contents: - Setting up Prisma, data modeling &amp; migrations- Exploring Prisma Client to query the database- Building REST API routes with Express- Building a GraphQL API with Apollo Server <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Database Workflows & API Development with Prisma

Nikolas Burk

GraphQL Galaxy

GraphQL Galaxy 2021

This talk provides an overview of using GraphQL, Apollo, and Next.js together. It covers Next.js' data loading and routing capabilities, code generation with GraphQL, and generating TypeScript types. The talk also explores Apollo Client and its integration with GraphQL code generation. The speaker recommends checking out companion repositories and resources for more information.

Modern frontend applications want to efficiently query data on page load and navigate, format the data with TypeScript, and cache data between repeat requests. Setting that all up on your own is a chore... but with Apollo and Next.js, you can set up your client to auto-generate TypeScript types, cache query results intelligently, and generally be a breeze to work with. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL + Apollo + Next.js: A Lovely Trio

Josh Goldberg

Today's Talk focused on making GraphQL graphs more usable and approachable. It covered topics such as onboarding developers, enforcing graph usage, handling errors and authentication, creating a custom developer portal, enhancing the log-in button and query IDE experience, enforcing rules, and building and customizing public graphs.

"What is GraphQL used for?” “How do I find the fields I need?” “How do I test queries against a local graph?” All of these are common and valid questions that developers who are learning GraphQL have when they are first getting started with a unified graph. The secret to overcoming these challenges? You guessed it, Apollo Studio! In this session, we’ll dive into the best tools in Apollo Studio to help new (and experienced) developers feel confident when querying and collaborating on a unified graph <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#apollo