Summary - Data fetching

Fetch products with SWR and write an add-to-cart flow.

Summary - Data fetching

In this group you learned cached data fetching with SWR, server state management with React Query, and data mutation with useMutation. Now it's time to combine them.

Typical flow: fetch the product list with useSWR or useQuery; add a new product with useMutation; in onSuccess refresh the cache with invalidateQueries. This loop is the heart of modern React apps.

In the next step you will write a complete flow that fetches products and adds them to a cart.

Exercise ProductPage with cart add

Complete the skeleton. Write a ProductPage component. Fetch '/api/products' with useSWR (fetcher: (url) => fetch(url).then(r => r.json())). If isLoading render <p>Loading</p>. Otherwise render <ul> with products.map(p => <li key={p.id}>{p.name}<button onClick={() => addToCart(p)}>Add to cart</button></li>). Define addToCart taking a product parameter and calling console.log. Add export default.

Show example solution

import useSWR from 'swr';

function addToCart(product) {
  console.log('Added to cart:', product.name);
}

function ProductPage() {
  const { data: products, isLoading } = useSWR(
    '/api/products',
    (url) => fetch(url).then((r) => r.json())
  );
  if (isLoading) return <p>Loading</p>;
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>
          {p.name}
          <button onClick={() => addToCart(p)}>Add to cart</button>
        </li>
      ))}
    </ul>
  );
}

export default ProductPage;

Test yourself

Which topic was NOT covered in this group?
```
Three topics were covered; router was not.
```
- Fetching with SWR
- React Query useQuery
- Changing data with useMutation
- Router configuration
Show answer

Router configuration — Router was not covered in this group.

invalidateQueries call

queryClient.____({ queryKey: ['products'] });

Show answer

queryClient.invalidateQueries({ queryKey: ['products'] });

Next lesson: What is Redux Toolkit?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies