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!