Consultando api no react com useQuery

Hello world!

Ultimamente estou utilizando muito o React Query para consultar minhas api's no React, então decidi compartilhar um pouco sobre como reduzi meu código.

Quando ia fazer uma consulta sempre tinha que me preocupar com 3 estados básicos:

• data: onde a resposta da minha requisição iria ficar;
• loading: booleano para controlar se a requisição está sendo feita ou não;
• error: estado onde para armazenar qualquer erro durante a requisição;

O Código ficaria mais ou menos assim:

  const [repos, setRepos] = useState<IRepo[]>();
  const [loading, setLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string>();

  useEffect(() => {
    fetchReposInit();
  }, []);

  async function fetchReposInit() {
    try {
      setErrorMessage(undefined);
      setLoading(true);
      const reposResponse = await fetchReposApi();
      setRepos(reposResponse);
    } catch (error) {
      console.log("Error");
      setRepos(undefined);
      setErrorMessage(error.message);
    } finally {
      setLoading(false);
    }
  }

  async function fetchReposApi() {
    await delay(2000); // Simular uma requisição lenta;
    const res = await fetch("https://api.github.com/users/deividfrancis/repos");
    if (!res.ok) {
      throw await res.json();
    }
    const json = await res.json();
    return json;
  }

Rect Query

Instalação:

 $ npm i react-query
 # or
 $ yarn add react-query

Configurar Provider:

Dentro do arquivo raiz da nossa aplicação colocamos o QueryClientProvider entorno do nosso <App/> para que a mágica funcione.

import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "react-query";
import App from "./App";
import "./index.css";
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

Agora com a lib do React Query consigo resumir todo esse gerenciamento da seguinte forma:

const { isLoading, data, error } = useQuery("repos", fetchReposApi);

  async function fetchReposApi() {
    await delay(2000); // Simular uma requisição lenta;
    const res = await fetch("https://api.github.com/users/deividfrancis/repos");
    if (!res.ok) {
      throw await res.text();
    }
    const json = await res.json();
    return json as IRepo[];
  }

Código fonte

O Código completo esta disponível em meu github.

Para ver uma forma mais clara as alterações que foram necessarias fiz esta PR onde mostra exatamente oque mudei.

https://github.com/DeividFrancis/react-query-example/pull/1/files

--

Conclusão

--

Bem, o React Query é mais do que mostrei acima, tem mais coisas massa como controle de cache, mutations, estados de isFetching mas deixo o resto dos pontos positivos e negativos dessa lib para vocês comentar abaixo.

Obrigado;