Installing and using TanStack Query (formerly React Query)

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:

>

<code class="language-bash">npm install @tanstack/react-query</code>

or

<code class="language-bash">yarn add @tanstack/react-query</code>

To use development tools (devotools), install:

>

<code class="language-bash">npm install @tanstack/react-query-devtools</code>

Configuration

Wrap your application with QueryClientProvider to manage data requests:

<code class="language-javascript">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>
  );
}</code>

Basic use with useQuery

The Hook useQuery facilitates the obtaining of data from an API:

>

<code class="language-javascript">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>
  );
}</code>

Mutations with useMutation

To perform operations such as post, put or delete, use useMutation:

>

<code class="language-javascript">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>
  );
}</code>

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:

1. Receive parameters (petition options, etc.).
2. Make the request (using fetch, axios, etc.).
3. Returns a promise with data or an error.

Fetcher example:

<code class="language-javascript">const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  const json = await response.json();
  return json;
};</code>

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!