React Query pro zjednodušení načítání dat
React Query zjednodušuje správu stavů načítání externího obsahu (např. Fetch).
🚀 Začínáme s React Query
Nainstalujeme React Query do našeho projektu:
npm install @tanstack/react-query @tanstack/react-query-devtools
# nebo
yarn add @tanstack/react-query @tanstack/react-query-devtools
# nebo
bun add @tanstack/react-query @tanstack/react-query-devtools
# atakdáleNastavení React Query Provider
Nejprve musíme nastavit QueryClient a QueryClientProvider v naší aplikaci:
// main.jsx nebo App.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import App from './App';
// Vytvoříme nový QueryClient a připojíme ho k naší aplikaci (main.jsx)
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000, // 5 minut
cacheTime: 10 * 60 * 1000, // 10 minut
},
},
});
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<App />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</React.StrictMode>
);A můžeme začít nahrazovat naše fetch volání pomocí React Query!
Náš kód z minula po přidání React Query:
React Query nám umožňuje zjednodušit načítání dat a správu stavů (načítání, chyba, úspěch) pomocí hooku
useQuery, který za nás vyřeší stavy aplikace a umožňuje použití dalších vychytávek.
// App.jsx
import React from 'react';
import { useQuery } from '@tanstack/react-query';
// Funkce pro načítání dat
const fetchUser = async (userId) => {
const response = await fetch(`/api/user/${userId}`);
if (!response.ok) {
throw new Error('Nepodařilo se načíst data uživatele');
}
return response.json();
};
const MyCard = ({ userId = 1 }) => {
const {
data,
isLoading,
error,
refetch
} = useQuery({
queryKey: ['user', userId],
queryFn: () => fetchUser(userId),
retry: 3,
staleTime: 5 * 60 * 1000, // Data jsou čerstvá 5 minut
});
if (isLoading) {
return <div>Načítání...</div>;
}
if (error) {
return (
<div>
<p>Chyba: {error.message}</p>
<button onClick={() => refetch()}>Zkusit znovu</button>
</div>
);
}
return (
<>
<h1>{data.name}</h1>
<p>{data.email}</p>
<p>{data.website}</p>
</>
);
};
export default MyCard;🚀 Pokročilé použití React Query
Mutace (vytváření, úprava, mazání dat):
Při změně dat (např. vytváření nového uživatele) můžeme použít hook
useMutation, který nám umožní jednodušeji spravovat stavy mutace a zjednodušit aktualizaci našich dat po změně.
import { useMutation, useQueryClient } from '@tanstack/react-query';
const CreateUserForm = () => {
const queryClient = useQueryClient();
const createUserMutation = useMutation({
mutationFn: async (newUser) => {
const response = await fetch('/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(newUser),
});
if (!response.ok) {
throw new Error('Nepodařilo se vytvořit uživatele');
}
return response.json();
},
onSuccess: () => {
// Invalidujeme cache pro seznam uživatelů
queryClient.invalidateQueries({ queryKey: ['users'] });
},
});
const handleSubmit = (formData) => {
createUserMutation.mutate(formData);
};
return (
<form onSubmit={handleSubmit}>
{/* formulář */}
<button
type="submit"
disabled={createUserMutation.isPending}
>
{createUserMutation.isPending ? 'Vytváří se...' : 'Vytvořit uživatele'}
</button>
{createUserMutation.error && (
<p>Chyba: {createUserMutation.error.message}</p>
)}
</form>
);
};Typescript podpora
React Query má skvělou podporu pro Typescript, což nám umožňuje typovat naše dotazy a mutace pro lepší vývojářský zážitek.
import { useQuery } from '@tanstack/react-query';
import React from 'react';
interface User {
id: number;
name: string;
email: string;
website: string;
}
//...
const { data, isLoading, error } = useQuery<User>({
queryKey: ['user', userId],
queryFn: () => fetchUser(userId),
});
//...