data-fetching

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Data fetching waterfall pitfall

Fetching data directly in components can lead to slower loading times due to network request waterfalls. Prefetching data in router loaders or on the server is recommended to allow a page's data to be fetched all at once as the page is being displayed.

Recommended data fetching libraries for GraphQL

The recommended data fetching libraries for GraphQL APIs are Apollo and Relay.

Recommended data fetching libraries for REST/backends

The recommended data fetching libraries for REST-style APIs and most backends are TanStack Query, SWR, and RTK Query.

Data fetching proper handling requirements

Proper data fetching requires handling loading states, error states, and caching the fetched data. Purpose-built data fetching libraries handle the hard work of fetching and caching, allowing developers to focus on what data the app needs and how to display it. These libraries are typically used directly in components but can also be integrated into routing loaders for faster pre-fetching and better performance, and in server rendering.

Server Components example with async function

A server-only React component can be written as an async function that reads from a database or file. Data from the server component is passed down to interactive client components. This component runs only on the server or during the build and doesn't increase the JavaScript bundle size. ```js // This component runs *only* on the server (or during the build). async function Talks({ confId }) { // 1. You're on the server, so you can talk to your data layer. API endpoint not required. const talks = await db.Talks.findAll({ confId }); // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger. const videos = talks.map(talk => talk.video); // 3. Pass the data down to the components that will run in the browser. return <SearchableVideoList videos={videos} />; } ```

Suspense for data fetching loading states

Suspense integrates with data fetching in Next.js App Router, allowing you to specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree. ```js <Suspense fallback={<TalksLoading />}> <Talks confId={conf.id} /> </Suspense> ```

Async server components with Suspense example

Server components can be async and fetch data directly. Use React Suspense with a fallback to show loading state while the async component resolves. Example: import { Suspense } from 'react'; import Albums from './Albums'; export default function App() { return <div><h1>Music</h1><Suspense fallback={<p>Loading albums...</p>}><Albums /></Suspense></div>; } export default async function Albums() { const albums = await fetchAlbums(); return <ul>{albums.map(album => <li key={album}>{album}</li>)}</ul>; }

Race condition in data fetching Effects

Multiple fetches triggered by dependency changes can complete out of order, causing stale data to overwrite newer data. Fix this with an ignore flag or AbortController to discard responses that are no longer relevant. This is a common pitfall in fetch Effects.

Fetching data in Effects alternatives

Fetching directly in Effects has significant downsides: doesn't run on server, creates network waterfalls, no caching/preloading, and requires boilerplate to avoid race conditions. Better approaches: use framework built-in data fetching, use client-side cache libraries like TanStack Query or useSWR, or build your own solution with Effects underneath.

Race condition in data fetching

A race condition occurs in data fetching when multiple requests are made for the same resource (e.g., as the user types) but responses arrive in a different order than the requests were made. The last response to arrive sets the state, potentially showing outdated data.

Ignore stale fetch responses pattern

To implement cleanup for data fetching, create a variable like `let ignore = false` before the fetch. In the cleanup function, set `ignore = true`. In the response handler, only update state if `!ignore`. This prevents setting state with stale responses.

Data fetching with Effects requires cleanup function

When fetching data in an Effect, add a cleanup function to ignore stale responses. This prevents race conditions where responses arrive out of order and old data overwrites new data.

Keep data flow predictable by passing down props

When a child component needs data, have the parent fetch and pass it down as a prop rather than having the child fetch in an Effect. This makes data flow predictable: data flows down from parent to child. Tracing where data comes from becomes easier by going up the component chain.

Data fetching complications

Beyond race conditions, data fetching involves caching responses, server-side rendering, and avoiding network waterfalls. Modern frameworks provide more efficient built-in data fetching mechanisms than writing Effects directly in components.

Give your agent this brain