Queries & Mutations

Use generated hooks for data fetching (queries) and data modification (mutations).

25 min

3 sections

queries

mutations

hooks

01. Query Hooks

Section 1 of 3

RTK Query automatically generates hooks for your queries. Use them in components to fetch and cache data.

typescript

"use client";
import { useGetTodosQuery } from './api';

export default function TodoList() {
  const { data, error, isLoading } = useGetTodosQuery();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data?.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Exercise

Use a Query Hook

Practice

Create a component that uses a query hook to display a list of items.

API Slice Creation

Caching & Invalidation

Back to Course