Tanstack Query, AKA React Query, è una popolare libreria per il recupero dei dati nelle applicazioni React. React Query semplifica il processo di recupero, memorizzazione nella cache e aggiornamento dei dati nelle applicazioni Web. Questo articolo discuterà dell'utilizzo di React Query per gestire il recupero dei dati in un'applicazione React.

Installazione e configurazione di React Query

Puoi installare React Query usando npm o yarn. Per installarlo usando npm, esegui il seguente comando nel tuo terminale:

npm i @tanstack/react-query

Per installarlo usando il filato, esegui il seguente comando nel tuo terminale:

filato add @tanstack/react-query

Dopo aver installato la libreria React Query, avvolgi l'intera applicazione nel file QueryClientProvider componente. IL QueryClientProvider avvolge l'intera applicazione e fornisce un'istanza di QueryClient a tutti i suoi componenti figlio.

IL QueryClient è il pezzo centrale di React Query. IL QueryClient gestisce tutta la logica di recupero e memorizzazione nella cache dei dati. IL QueryClientProvider componente prende il QueryClient come prop e lo rende disponibile per il resto della tua applicazione.

Per utilizzare il QueryClientProvider e il QueryClient nella tua applicazione, devi importarli dal file @tanstack/react-query biblioteca:

importare Reagire da'reagire';
importare Reagire DOM da'react-dom/cliente';
importare App da'./App';
importare { QueryClientProvider, QueryClient } da'@tanstack/reagire-query';
cost queryClient = nuovo QueryCliente();
ReactDOM.createRoot(documento.getEementd('radice')).render(



 </QueryClientProvider>
 </React.StrictMode>
)

Comprensione dell'hook useQuery

IL useQuery hook è una funzione fornita dalla libreria React Query, che recupera i dati da un server o da un'API. Accetta un oggetto con le seguenti proprietà: queryKey (la chiave della query) e queryFn (una funzione che restituisce una promessa che si risolve nei dati che si desidera recuperare).

IL queryKey identifica la query; deve essere univoco per ogni query nell'applicazione. La chiave può essere qualsiasi valore, ad esempio una stringa, un oggetto o un array.

Per recuperare i dati utilizzando il useQuery hook, devi importarlo dal file @tanstack/react-query biblioteca, passa a queryKey e usa il queryFn per recuperare i dati da un'API.

Per esempio:

importare Reagire da'reagire';
importare assios da'assio';
importare {usaQuery} da'@tanstack/reagire-query';
funzioneCasa() {
cost postQuery = useQuery({
 queryKey: ['post'],
 queryFn: asincrono () => {
cost risposta = aspetta axios.get(' https://jsonplaceholder.typicode.com/posts');
cost dati = aspetta dati.di.risposta;
ritorno dati;
 }
 })
Se( postQuery.isLoading ) ritorno ( <h1>Caricamento...h1>)
Se( postQuery.isError ) ritorno (<h1>Errore durante il caricamento dei dati!!!h1>)

ritorno (



Casa</h1>
 { postQuery.data.map( (articolo) => ( <Pchiave={numero identificativo dell'oggetto}>{Titolo dell'oggetto}P>)) }
 </div>
 )
}
esportarepredefinito Casa;

IL useQuery hook restituisce un oggetto che contiene informazioni sulla query. IL postQuery oggetto contiene il isLoading, isError, E isSuccess stati. IL isLoading, isError, E isSuccess gli stati gestiscono il ciclo di vita del processo di recupero dei dati. IL postQuery.data La proprietà contiene i dati recuperati dall'API.

IL isLoading state è un valore booleano che indica se la query sta attualmente caricando i dati. Quando il isLoading lo stato è vero, la query è in corso e i dati richiesti non sono disponibili.

IL isError state è anche un valore booleano che indica se si è verificato un errore durante il recupero dei dati. Quando isError è vero, la query non è riuscita a recuperare i dati.

IL isSuccess state è un valore booleano che indica se la query ha recuperato correttamente i dati. Quando isSuccess è vero, puoi visualizzare i dati recuperati nella tua applicazione.

Nota che puoi accedere a queryKey usando il queryFn. IL queryFn accetta un solo argomento. Questo argomento è un oggetto contenente i parametri richiesti per la richiesta API. Uno di questi parametri è il queryKey.

Per esempio:

usaQuery({
 queryKey: ['post'],
 queryFn: asincrono (oggetto) => {
consolare.log( obj.queryKey );
 }
 })

Gestione dei dati obsoleti

La query React offre molti modi per gestire i dati obsoleti. La libreria React Query assicura di effettuare automaticamente una nuova richiesta di recupero alla tua API quando i dati recuperati diventano obsoleti. Ciò garantisce che si restituiscano continuamente i dati più aggiornati.

Puoi controllare la velocità con cui i tuoi dati diventano obsoleti e l'intervallo di tempo tra ogni richiesta di recupero automatico utilizzando il stantioTime E refetchIntervallo opzioni. IL stantioTime option è una proprietà che specifica il numero di millisecondi in cui i dati memorizzati nella cache sono validi prima che diventino obsoleti.

IL refetchIntervallo option è una proprietà che specifica il numero di millisecondi tra ogni richiesta di recupero automatico della libreria React Query.

Per esempio:

usaQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 tempo stantio: 1000;
})

In questo esempio, il stantioTime è 1000 millisecondi (1 secondo). I dati recuperati diventeranno obsoleti dopo 1 secondo, quindi la libreria React Query effettuerà un'altra richiesta di recupero all'API.

Qui usi il refetchIntervallo opzione per controllare l'intervallo di tempo tra ogni richiesta di recupero automatico:

usaQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 intervallo di recupero: 6000;
})

IL refetchIntervallo è 6000 millisecondi (6 secondi). La query React attiverà automaticamente una nuova richiesta di recupero per aggiornare i dati memorizzati nella cache dopo 6 secondi.

Comprensione dell'hook useMutation

IL useMutation hook è un potente strumento nella libreria React Query. Esso esegue un'operazione asincrona mutazioni, come la creazione o l'aggiornamento di dati su un server. Usando il useMutation hook, puoi facilmente aggiornare lo stato dell'applicazione e l'interfaccia utente in base alla risposta della mutazione.

Di seguito, abbiamo creato un file AddPost componente che rende a modulo con un campo di input e un pulsante di invio. Questo componente del modulo utilizzerà l'hook useMutation per aggiornare lo stato:

importare Reagire da'reagire'
funzioneAddPost() {
cost[post, setPost] = React.useState({
 titolo: ""
 })
funzionehandleChange(evento) {
 setPost( (prevState) => ({
 ...prevStato,
 [event.target.name]: evento.target.value
 }) )
 }
ritorno (



 tipo="testo"
 segnaposto='Aggiungi titolo'
 nome='titolo'
 onChange={handleChange} 
 valore={post.title}
 />
Aggiungi post</button>
 </form>
 )
}
esportarepredefinito AddPost;

Dentro il AddPost componente è uno stato inviare che funge da oggetto con una proprietà, titolo.

IL handleChange la funzione aggiorna lo stato inviare ogni volta che gli utenti digitano nei campi di input. Dopo aver creato il AddPost componente, importiamo il file useMutation hook e usarlo per aggiornare l'API.

Per esempio:

importare { usa Mutazione } da'@tanstack/reagire-query'
importare assios da'assio';
cost newPostMutation = useMutation({
 mutazioneFn: asincrono () => {
cost risposta = aspetta axios.post('', {
 titolo: post.titolo,
 });
cost dati = risposta.dati;
ritorno dati;
 }
 })

IL useMutation hook gestisce la richiesta HTTP per creare un nuovo post. IL newPostMutation constant rappresenta la funzione di mutazione e le sue opzioni di configurazione.

IL mutazioneFn è una funzione asincrona che invia una richiesta POST all'endpoint API. La richiesta include un oggetto contenente il file titolo valore dal inviare oggetto.

Per eseguire il mutazioneFn, dovrai chiamare il newPostMutation.mutate() metodo:

cost handleSubmit = asincrono (evento) => { 
 evento.preventDefault();
 newPostMutation.mutate();
}
ritorno (


 tipo="testo"
 segnaposto='Aggiungi titolo'
 nome='titolo'
 onChange={handleChange} 
 valore={post.title}
 />
Aggiungi post</button>
 </form>
 )
}

L'invio del modulo eseguirà il file handleSubmit funzione. IL handleSubmit funzione è una funzione asincrona che attiva la funzione di mutazione newPostMutation.mutate().

Recupero efficiente dei dati con la query Tanstack

Questo articolo esplora come gestire il recupero dei dati in un'applicazione React utilizzando la libreria tanstack/react-query.

La libreria tanstack/react-query fornisce uno strumento potente e flessibile per il recupero e la memorizzazione nella cache dei dati nelle applicazioni React. È facile da usare e le sue capacità di memorizzazione nella cache lo rendono efficiente e reattivo.

Che tu stia costruendo un piccolo progetto personale o un'ampia applicazione aziendale, la libreria tanstack/react-query può aiutarti a gestire e visualizzare i dati in modo efficace ed efficiente. Insieme a React, Next.js fornisce anche diversi processi integrati e librerie di terze parti per gestire il recupero dei dati.