TanStack Query

TanStack Query

1. Preparação do Ambiente de Trabalho

Para começar a trabalhar com Tanstack Query, é necessário configurar o ambiente de desenvolvimento. Aqui estão os passos básicos:

Instalação do Tanstack Query:

1. Adicione o Tanstack Query ao seu projeto React utilizando NPM ou Yarn:

   npm install @tanstack/react-query
   # ou
   yarn add @tanstack/react-query

2. Após a instalação, você pode começar a usar o Tanstack Query importando-o em seus componentes React.

2. Configuração Básica

Antes de utilizar o Tanstack Query, configure um cliente de consulta no ponto mais alto da sua aplicação React:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* O restante do seu aplicativo */}
    </QueryClientProvider>
  );
}

export default App;

3. Exemplos de Como Usar

Exemplo Básico (Buscar dados):

import { useQuery } from '@tanstack/react-query';

function fetchPlanets() {
  return fetch('https://swapi.dev/api/planets/').then(res => res.json());
}

function Planets() {
  const { data, status } = useQuery(['planets'], fetchPlanets);

  if (status === 'loading') return <div>Loading...</div>;
  if (status === 'error') return <div>Error fetching data</div>;

  return (
    <div>
      {data.results.map(planet => (
        <p key={planet.name}>{planet.name}</p>
      ))}
    </div>
  );
}

export default Planets;

Exemplo de Persistência (utilizando cache e persistência automática):

Tanstack Query oferece suporte a configurações de cache que permitem que as consultas persistam e sejam reutilizadas em todo o aplicativo, reduzindo o número de chamadas de rede:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24, // 24 horas
      staleTime: 1000 * 60 * 5, // 5 minutos
      refetchOnWindowFocus: true,
    },
  },
});

Exemplo que envolva comunicação com servidor:

Considerando um cenário onde você tem uma aplicação web que interage com um servidor para buscar dados de usuários utilizando Tanstack Query:

import { useQuery } from '@tanstack/react-query';

function fetchUsers() {
  return fetch('https://api.example.com/users').then(res => res.json());
}

function Users() {
  const { data, isError, isLoading, error } = useQuery(['users'], fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default Users;

4. Outros Comandos Presentes no Tanstack Query

1. Refetching on demand:

   const { refetch } = useQuery(['data'], fetchData);

2. Paginação:

   useInfiniteQuery(['data'], fetchData, {
     getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
   });

3. Seleção de dados específicos:

   const { data: name } = useQuery(['user', userId], fetchUser, {
     select: data => data.name,
   });

4. Mutations:

   import { useMutation } from '@tanstack/react-query';
   
   function updateUser(userId, user) {
     return fetch(`https://api.example.com/users/${userId}`, {
       method: 'PUT',
       body: JSON.stringify(user),
     }).then(res => res.json());
   }
   
   const { mutate } = useMutation(updateUser);

5. Query Cancellation:

   const { cancel } = useQuery(['data'], fetchData);

Com essas ferramentas e técnicas, você pode criar aplicações web poderosas e responsivas usando Tanstack Query, aprimorando o gerenciamento de estado de dados em projetos React modernos.