Veja como fazer uma requisição API com apenas uma única linha de código usando swr no ReactJS
Já pensou fazer uma requisição API utilizando apenas uma única linha de código no React? Isso é possível com uma lib fantástica, chamada useSWR. Temos, também, a possibilidade de fazer isso com uma outra lib, chamada useQuery, porém vamos utilizar o swr, pois, diferentemente de useQuery, não é necessária a importação de nenhum contexto.
Se quiséssemos fazer uma requisição API que nos retornasse estado de loading e error, teríamos que escrever bastante linhas de código. Este é um exemplo de como seria uma requisição API via axios, utilizando useEffect para verificar mutações de dados:
export function HomePage() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
try {
await axios.get('http://localhost:3333/api')
.then(response => setData(response.data))
.finally(() => setLoading(false));
} catch(err) {
alert(err);
}
}, [data])
if (loading) return 'Carregando...';
}
viu? mas todas essas linhas podem ser economizadas utilizando uma lib super simples, chamada swr. Olha só como fica simples... Para isso, eu criei um contexto, a fim de poder utilizá-la em qualquer lugar da aplicação, onde também faço uso do TypeScript.
import { createContext, useEffect, useState } from "react";
import { api } from "../utils/api";
import useSWR, { KeyedMutator } from 'swr';
interface Todo {
id?: string;
task: string;
is_completed: boolean;
created_at?: string | Date;
updated_at?: string | Date;
}
type AuthContextType = {
theme: string;
setTheme: React.Dispatch<React.SetStateAction<"dark" | "light">>;
data: Todo[] | undefined;
error: string;
isLoading: boolean;
mutate: KeyedMutator<Todo[]>;
activeMenu: boolean;
setActiveMenu: React.Dispatch<React.SetStateAction<boolean>>;
}
type ChildrenProps = {
children: React.ReactNode;
}
export const ThemeContext = createContext({} as AuthContextType);
export function ThemeProvider({ children }: ChildrenProps) {
const [theme, setTheme] = useState<'dark' | 'light'>(
localStorage.getItem("theme") !== "dark" ? "light" : "dark"
);
const [activeMenu, setActiveMenu] = useState(true);
const { data, error, isLoading, mutate } = useSWR<Todo[]>('/api/todos', api.getTodos);
useEffect(() => {
const root = window.document.documentElement;
const oldTheme = theme === 'dark' ? 'light' : 'dark';
root.classList.remove(oldTheme);
root.classList.add(theme);
localStorage.setItem("theme", theme);
}, [theme]);
return (
<ThemeContext.Provider value={{ theme, setTheme, data, error, isLoading, mutate, activeMenu, setActiveMenu }}>
{children}
</ThemeContext.Provider>
)
}
Essa linha de código em específico que diz tudo:
const { data, error, isLoading, mutate } = useSWR<Todo[]>('/api/todos', api.getTodos);
Aqui utilizamos um hook (api.getTodos) que faz a requisição dos dados, e o swr nos entrega a data, estado de error, loading e as mutações, para que seja possível identificar alterações nos dados da API.
Este aqui é o hook:
import axios from "axios";
import { Todo } from "../pages/HomePage";
async function getTodos(): Promise<Todo[]> {
const response = await axios.get<Todo[]>('http://localhost:3333/todos');
return response.data;
}
async function postTodo(): Promise<Todo> {
const response = await axios.post<Todo>('http://localhost:3333/todos');
return response.data;
}
export const api = {
getTodos,
postTodo,
};
E aí, curtiu a facilidade?
Caso queira acompanhar melhor, fiz um vídeo que está no meu linkedin explicando tudinho :)
Além de que este repositório está disponível no meu github:
Links: