Introduzione a React Query
React Query è una libreria descritta in questa maniera:
Fetch, cache and update data in your React and React Native applications all without touching any "global state".
Ho deciso di testarla, ed in effetti non sembra affatto male; sicuramente dovrò testarla più a fondo ed usarla in produzione.
Detto ciò vediamo di farne un test; installiamola tramite npm:
npm i react-query
A questo punto creiamo un componente che farà il fetch dei dati:
import {useQuery} from "react-query";
const Posts = () => {
const fetchData = async () => {
const url = 'https://jsonplaceholder.typicode.com/posts';
const res = await fetch(url);
return res.json();
}
const {isLoading, isError, data, error} = useQuery('data', fetchData);
if (isLoading) {
return <span>Loading...</span>
}
if (isError) {
return <span>Errore: {error.message}</span>
}
return (
<ul>
{data.map(it => (
<li key={it.id}>
{it.title}
</li>
))}
</ul>
)
}
export default Posts;
Come vedete qui impostiamo il loading, eventuali errori, e la visualizzazione dei dati.
Poi dobbiamo richiamare il componente:
import {QueryClient, QueryClientProvider} from "react-query";
import Posts from "./Posts";
function App() {
const queryClient = new QueryClient();
return (
<div className="App">
<QueryClientProvider client={queryClient}>
<Posts/>
</QueryClientProvider>
</div>
);
}
export default App;
Qui usiamo QueryClient e QueryClientProvider richiamando il componente creato in precedenza.
Enjoy!
javascript react usequery react-query queryclient queryclientprovider
Commentami!