Gerenciamento de Estado de Servidor com TanStack Query: Guia Prático

// src/main.jsximport React from 'react';import ReactDOM from 'react-dom/client';import { QueryClient, QueryClientProvider } from '@tanstack/react-query';import App from './App';// Cria uma instância do QueryClientconst queryClient = new QueryClient({  defaultOptions: {    queries: {      staleTime: 1000 * 60 * 5, // 5 minutos      refetchOnWindowFocus: false,    },  },});ReactDOM.createRoot(document.getElementById('root')).render(  <React.StrictMode>    <QueryClientProvider client={queryClient}>      <App />    </QueryClientProvider>  </React.StrictMode>);

// src/components/UserList.jsximport { useQuery } from '@tanstack/react-query';const fetchUsers = async () => {  const response = await fetch('https://api.example.com/users');  if (!response.ok) {    throw new Error('Falha ao buscar usuários');  }  return response.json();};export const UserList = () => {  const { data, error, isLoading, isError } = useQuery({    queryKey: ['users'], // Chave única para identificar esta query    queryFn: fetchUsers, // Função que busca os dados  });  if (isLoading) {    return <div>Carregando...</div>;  }  if (isError) {    return <div>Erro: {error.message}</div>;  }  return (    <div>      <h1>Usuários</h1>      <ul>        {data.map(user => (          <li key={user.id}>{user.name}</li>        ))}      </ul>    </div>  );};

// src/components/AddUser.jsximport { useMutation, useQueryClient } from '@tanstack/react-query';const addUser = async (newUser) => {  const response = await fetch('https://api.example.com/users', {    method: 'POST',    headers: {      'Content-Type': 'application/json',    },    body: JSON.stringify(newUser),  });  if (!response.ok) {    throw new Error('Falha ao adicionar usuário');  }  return response.json();};export const AddUser = () => {  const queryClient = useQueryClient();  const [name, setName] = useState('');  const mutation = useMutation({    mutationFn: addUser,    onSuccess: () => {      // Invalida a query de usuários para forçar refetch      queryClient.invalidateQueries({ queryKey: ['users'] });    },  });  const handleSubmit = (e) => {    e.preventDefault();    mutation.mutate({ name });    setName('');  };  return (    <form onSubmit={handleSubmit}>      <input        type="text"        value={name}        onChange={(e) => setName(e.target.value)}        placeholder="Nome do usuário"      />      <button type="submit" disabled={mutation.isLoading}>        {mutation.isLoading ? 'Adicionando...' : 'Adicionar Usuário'}      </button>      {mutation.isError && <div>Erro: {mutation.error.message}</div>}    </form>  );};

const { data } = useQuery({  queryKey: ['posts'],  queryFn: fetchPosts,  // Dados são considerados frescos por 5 minutos  staleTime: 1000 * 60 * 5,  // Dados são mantidos no cache por 10 minutos após ficarem obsoletos  cacheTime: 1000 * 60 * 10,  // Refetch quando a janela ganhar foco  refetchOnWindowFocus: true,  // Refetch quando a conexão for restabelecida  refetchOnReconnect: true,  // Refetch quando a página for retomada  refetchOnMount: true,  // Busca em segundo plano (a cada 30 segundos)  refetchInterval: 1000 * 30,  // Desativa busca em segundo plano quando a aba estiver inativa  refetchIntervalInBackground: false,});

// src/components/PaginatedPosts.jsximport { useQuery } from '@tanstack/react-query';const fetchPosts = async (page = 1, limit = 10) => {  const response = await fetch(    `https://api.example.com/posts?page=${page}&limit=${limit}`  );  if (!response.ok) {    throw new Error('Falha ao buscar posts');  }  return response.json();};export const PaginatedPosts = () => {  const [page, setPage] = useState(1);  const { data, isLoading, isError } = useQuery({    queryKey: ['posts', page], // Inclui a página na chave    queryFn: () => fetchPosts(page),    keepPreviousData: true, // Mantém dados da página anterior  });  if (isLoading) return <div>Carregando...</div>;  if (isError) return <div>Erro ao carregar posts</div>;  return (    <div>      <h1>Posts</h1>      <ul>        {data.posts.map(post => (          <li key={post.id}>{post.title}</li>        ))}      </ul>      <div>        <button onClick={() => setPage(page - 1)} disabled={page === 1}>          Anterior        </button>        <span> Página {page} </span>        <button onClick={() => setPage(page + 1)}>          Próximo        </button>      </div>    </div>  );};

// src/components/InfinitePosts.jsximport { useInfiniteQuery } from '@tanstack/react-query';const fetchPosts = async ({ pageParam = 1 }) => {  const response = await fetch(    `https://api.example.com/posts?page=${pageParam}`  );  if (!response.ok) {    throw new Error('Falha ao buscar posts');  }  return response.json();};export const InfinitePosts = () => {  const {    data,    fetchNextPage,    hasNextPage,    isFetchingNextPage,    status,  } = useInfiniteQuery({    queryKey: ['infinite-posts'],    queryFn: fetchPosts,    getNextPageParam: (lastPage) => lastPage.nextPage,    initialPageParam: 1,  });  if (status === 'loading') return <div>Carregando...</div>;  if (status === 'error') return <div>Erro ao carregar posts</div>;  return (    <div>      <h1>Posts Infinitos</h1>      <div>        {data.pages.map((page, i) => (          <div key={i}>            {page.posts.map(post => (              <div key={post.id}>{post.title}</div>            ))}          </div>        ))}      </div>      <button        onClick={() => fetchNextPage()}        disabled={!hasNextPage || isFetchingNextPage}      >        {isFetchingNextPage          ? 'Carregando mais...'          : hasNextPage          ? 'Carregar Mais'          : 'Nada mais para carregar'}      </button>    </div>  );};