Introduction to Tanstack Query
Tanstack Query (previously React Query) is a powerful bookstore to manage the status of data requests in React applications. Simplify the process of obtaining, storing in cache, synchronizing and updating data efficiently.
>Installation
To integrate Tanstack Query into your react project, use NPM or YARN:
>npm install @tanstack/react-query
or
yarn add @tanstack/react-query
To use development tools (devotools), install:
>npm install @tanstack/react-query-devtools
Configuration
Wrap your application with QueryClientProvider
to manage data requests:
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); function App() { return ( <QueryClientProvider client={queryClient}> <MyComponent /> {/* Opcional: Si instalaste DevTools */} <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> ); }
Basic use with useQuery
The Hook useQuery
facilitates the obtaining of data from an API:
import { useQuery } from '@tanstack/react-query'; function fetchData() { return fetch('https://jsonplaceholder.typicode.com/posts/1') .then(response => response.json()); } function MyComponent() { const { data, isLoading, error } = useQuery({ queryKey: ['post'], queryFn: fetchData }); if (isLoading) return <p>Cargando...</p>; if (error) return <p>Error: {error.message}</p>; return ( <div> <h1>{data.title}</h1> <p>{data.body}</p> </div> ); }
Mutations with useMutation
To perform operations such as post, put or delete, use useMutation
:
import { useMutation } from '@tanstack/react-query'; function createPost(newPost) { return fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newPost), }).then(response => response.json()); } function CreatePost() { const mutation = useMutation(createPost); return ( <button onClick={() => mutation.mutate({ title: 'Nuevo Post', body: 'Contenido del post' })}> Crear Post </button> ); }
The importance of fetcher in Tanstack Query
Tanstack Query needs a fetcher (a function that performs the request to the data source) to obtain external information. The fetcher acts as an intermediary, providing flexibility and maintaining the cleaning of the code. You can customize it to adapt it to your API.
What is a fetcher?
A fetcher is a function that:
fetch
, axios
, etc.). Fetcher example:
const fetchPosts = async () => { const response = await fetch('/api/posts'); const json = await response.json(); return json; };
Conclusion
Tanstack Query optimizes data management in React, improving performance with its cache and revalidation system. See you soon! ?
The above is the detailed content of Installing and using TanStack Query (formerly React Query). For more information, please follow other related articles on the PHP Chinese website!