TanStack Query (CZ článek)

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/TanStack/query').then((res) =>
        res.json(),
      ),
  })

  if (isPending) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}📋

// queries.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

export type Restaurant = {
  id: string;
  name: string;
  address: string;
};

// Fetcher: načte seznam restaurací
// klidně využívej fetchovací knihovnu jako `axios` nebo `ky`
const fetchRestaurants = async (): Promise<Restaurant[]> => {
  const res = await fetch('/api/restaurants');
  if (!res.ok) throw new Error('Chyba při načítání restaurací');
  return res.json();
};

// Fetcher: vytvoří novou restauraci
const postRestaurant = async (data: Omit<Restaurant, 'id'>): Promise<Restaurant> => {
  const res = await fetch('/api/restaurants', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  if (!res.ok) throw new Error('Chyba při přidávání restaurace');
  return res.json();
};

// Custom hook pro načítání seznamu
// vrátí objekt s daty (nebo null) a různými pomocníky typu boolean nebo Error, které automaticky sleduje, trackuje a ty na základě nich můžeš jen renderovat co potřebuješ
// např. data, isError, error, isPending, loading, status, isFetched, isStale, refetch
export const useRestaurants = () => {
  return useQuery<Restaurant[]>({
    queryKey: ['restaurants'], // VELICE důležité!!
    queryFn: fetchRestaurants,
    staleTime: 2 * 1000  // čas (v ms) který se data budou vracet z cache, místo nového volání API
  });
}

// Custom hook pro mutaci (vytvoření nové restaurace)
export const useAddRestaurant = () => {
  const queryClient = useQueryClient();

   // vrátí metody na správu akce POST (nebo jakékoliv jiné) mutation dle poskytnuté logiky
  return useMutation({
    mutationFn: postRestaurant,
    onSuccess: () => {
      // Po úspěšném přidání invaliduj seznam, aby se znovu načetl
      // TADY využiješ ten klíč, který si poskytoval původní useQuery funkci, a díky nemu jsou query provázané
      // doporučuji držet všechny `queryKeys` na jednom místě jako read-only objekt nebo enum
      queryClient.invalidateQueries({ queryKey: ['restaurants'] });
      // když je hotovo, seznam se refetchuje z API (díky invalidaci) a RestaurantList se rerenderuje
    },
  });
};📋

// RestaurantList.tsx
import { useRestaurants } from './queries';

export const RestaurantList = () => {
  const { data, isLoading, error } = useRestaurants();

  if (isLoading) return <p>Načítání restaurací...</p>;
  if (error) return <p>Chyba: {(error as Error).message}</p>;

  return (
    <ul>
      {data?.map((r) => (
        <li key={r.id}>
          <strong>{r.name}</strong> – {r.address}
        </li>
      ))}
    </ul>
  );
};
📋

// AddRestaurantForm.tsx
import { useState } from 'react';
import { useAddRestaurant } from './queries';

export const AddRestaurantForm = () => {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  const mutation = useAddRestaurant(); // tady metody na správu `action`, ale i pomocníci s info o stavu query

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name || !address) return;

    mutation.mutate({ name, address });
    setName('');
    setAddress('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text"
        placeholder="Název restaurace"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input type="text"
        placeholder="Adresa"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />
      <button type="submit" disabled={mutation.isPending}>
        {mutation.isPending ? 'Přidávám...' : 'Přidat'}
      </button>
      {mutation.error && (
        <p style={{ color: 'red' }}>
          {(mutation.error as Error).message}
        </p>
      )}
    </form>
  );
};📋

// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { RestaurantList } from './RestaurantList';
import { AddRestaurantForm } from './AddRestaurantForm';

const queryClient = new QueryClient();

export const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <h1>Restaurace</h1>
      <AddRestaurantForm />
      <RestaurantList />
    </QueryClientProvider>
  );
};📋