Como construir e consumir APIs simuladas em aplicativos React usando Mirage.js

Ao desenvolver aplicativos full-stack, uma parte significativa do trabalho de front-end depende de dados em tempo real do back-end.

Isso pode significar que você deve adiar o desenvolvimento da interface do usuário até que a API esteja disponível para uso. No entanto, esperar que a API esteja pronta para configurar o frontend pode reduzir consideravelmente a produtividade e estender os prazos do projeto.

Uma ótima solução para esse desafio envolve a utilização de APIs simuladas. Essas APIs permitem que você desenvolva e teste seu front-end usando dados que imitam a estrutura dos dados reais, tudo sem depender do real API.

Primeiros passos com APIs simuladas Mirage.js

Mirage.js é uma biblioteca JavaScript que permite criar APIs simuladas, completas com um servidor de teste em execução no lado do cliente do seu aplicativo web. Isso significa que você pode testar seu código de front-end sem precisar se preocupar com a disponibilidade ou o comportamento de sua API de back-end real.

Para usar Mirage.js, primeiro você precisa criar endpoints de API simulados e definir as respostas que eles devem retornar. Em seguida, o Mirage.js intercepta todas as solicitações HTTP feitas pelo seu código de front-end e retorna as respostas simuladas.

Quando sua API estiver pronta, você poderá facilmente passar a usá-la alterando apenas a configuração do Mirage.js.

Você pode encontrar o código fonte deste projeto neste GitHub repositório.

Crie um servidor API simulado com Mirage.js

Para demonstrar como configurar APIs simuladas, você criará um aplicativo React simples que usa um back-end Mirage.js. Mas primeiro, crie um aplicativo React usando o comando create-react-app. Alternativamente, você pode usar Vite para configurar um projeto React. Em seguida, instale a dependência Mirage.js.

npm install --save-dev miragejs

Agora, para criar uma instância do servidor Mirage.js para interceptar solicitações e simular respostas da API, use o comando criarServidor método. Este método usa um objeto de configuração como parâmetro.

Este objeto inclui o ambiente e espaço para nome para a API. O ambiente especifica o estágio de desenvolvimento em que a API está, como desenvolvimento, enquanto o namespace é o prefixo adicionado a todos os terminais da API.

Crie um novo src/server.js arquivo e inclua o seguinte código:

import { createServer, Model } from'miragejs';
const DEFAULT_CONFIG = {
 environment: "development",
 namespace: "api",
};
exportfunctionmakeServer({ environment, namespace } = 
 DEFAULT_CONFIG) {
let server = createServer({
 environment,
 namespace,
 models: {
 Todo: Model, 
 },
 });
return server;
}

Se necessário, você pode personalizar o namespace para corresponder à estrutura de URL da sua API real, incluindo a especificação da versão. Dessa forma, quando sua API estiver pronta, você poderá integrá-la facilmente ao seu aplicativo front-end com alterações mínimas de código.

Além disso, dentro da configuração da instância do servidor, você também pode definir um modelo de dados para simular o armazenamento e a recuperação de dados no ambiente simulado.

Por fim, inicie o servidor Mirage.js importando o objeto servidor em seu index.jsx ou principal.jsx arquivo da seguinte forma:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { makeServer } from'./server';
if ( process.env.NODE_ENV 'development' && 
typeof makeServer 'function'
 ) {
 makeServer();}
ReactDOM.createRoot(document.getElementById('root')).render(


 </React.StrictMode>,
)

Adicionar dados iniciais à API simulada

Mirage.js tem um banco de dados na memória que você pode usar para preencher previamente a API simulada com dados iniciais e para gerenciar dados de teste de seu aplicativo cliente. Isso significa que você pode armazenar e buscar os dados de teste do banco de dados simulado e usá-los em seu aplicativo cliente.

Para adicionar dados iniciais à API simulada, adicione o seguinte código no arquivo servidor.js arquivo logo abaixo do modelos objeto.

seeds(server) {
 server.create('Todo', {
 title: 'item no 1',
 body:
'Do something nice for someone I care about',
 });
 server.create('Todo', {
 title: 'item no 2',
 body:
'Memorize the fifty states and their capitals.',
 });
 server.create('Todo', {
 title: 'item no 3',
 body:
'Watch a classic movie.',
 });
 },

O sementes A função preenche um servidor Mirage.js com três itens de tarefas, cada um com um título e uma descrição. Opcionalmente, em vez de codificar os dados de teste, você pode integrar uma biblioteca como Faker.js para gerar os dados de teste necessários.

Definir as rotas simuladas da API

Agora, defina algumas rotas de API para a API simulada. Nesse caso, especifique rotas para lidar com solicitações simuladas de API GET, POST e DELETE.

Logo abaixo dos dados iniciais, adicione o código abaixo:

routes() {
this.namespace = 'api/todos'; 

this.get('/', (schema, request) => {
return schema.all('Todo'); 
 });
this.post('/', (schema, request) => {
let attrs = JSON.parse(request.requestBody);
return schema.create('Todo', attrs); 
 });
this.delete('/:id', (schema, request) => {
let id = request.params.id;
return schema.find('Todo', id).destroy(); 
 });
 }

Construa um cliente React

Agora que a API simulada está configurada, vamos construir um cliente React para interagir e consumir os endpoints da API. Você é livre para usar qualquer biblioteca de componentes de UI que desejar, mas este guia usará Chakra UI para estilizar o aplicativo.

Primeiro, instale estas dependências:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

A seguir, crie um novo src/components/TodoList.jsx arquivo e inclua o seguinte código:

import React, { useState, useEffect } from'react';
import {
 Button,
 Box,
 Container,
 Text,
 Input,
 FormControl,
 Flex,
} from'@chakra-ui/react';

Agora, defina um componente funcional para renderizar a interface do usuário da lista de tarefas, incluindo os campos de entrada para adicionar novas tarefas e uma lista de tarefas existentes.

exportdefaultfunctionTodoList() {
return (

"xl" mb={4}>Todo List</Text>
4}>
 type="text"
 name="body"
 value={newTodo.body}
 onChange={handleInputChange}
 />
 </FormControl>
"teal" onClick={handleAddTodo}> Add Todo</Button>
 {loading? ( <Text>Loading...Text> ): (
 todos.map((todo) => (
2} p={2} borderWidth="1px">
"center">
"1">{todo.body}</Text>
 colorScheme="red"
 size="sm"
 onClick={() => handleDelete(todo.id)}>Delete 
 </Button>
 </Flex>
 </Box>
 ))
 )}
 </Container>
 );
}

Agora, defina as funções do manipulador para as operações de adição e exclusão. Mas primeiro, adicione esses estados. Alternativamente, você pode use o gancho useReducer para definir a lógica de gerenciamento de estado para o aplicativo de lista de tarefas.

const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState({ title: '', body: '' });
const [loading, setLoading] = useState(true);
const [renderKey, setRenderKey] = useState(0);

Agora, defina a lógica para recuperar e exibir os dados iniciais no banco de dados na memória quando o aplicativo for carregado pela primeira vez no navegador, agrupando o buscar método em um useEfeito gancho.

 useEffect(() => {
 fetch('/api/todos') 
 .then((response) => response.json())
 .then((data) => {
 setTodos(data.todos);
 setLoading(false);
 });
 }, [renderKey]);

O renderKey state também está incluído no useEffect para garantir que o código acione uma nova renderização de dados recém-adicionados no banco de dados na memória quando o servidor estiver em execução.

Simplificando, sempre que um usuário adiciona novos dados de tarefas ao banco de dados Mirage.js, o componente será renderizado novamente para exibir os dados atualizados.

Adicionando dados à API

Agora, defina a lógica para adicionar dados à API por meio de solicitações POST. Logo abaixo do gancho useEffect, inclua o código a seguir.

const handleInputChange = (e) => {
const { name, value } = e.target;
 setNewTodo((prevTodo) => ({ ...prevTodo, [name]: value }));
};
const handleAddTodo = () => {
 setLoading(true);
 fetch('/api/todos', {
 method: 'POST',
 headers: {
'Content-Type': 'application/json',
 },
 body: JSON.stringify(newTodo),
 }).then((response) => response.json()).then((createdTodo) => {
 setTodos((prevTodos) => [createdTodo, ...prevTodos]);
 setNewTodo({ title: '', body: '' });
 setRenderKey((prevKey) => prevKey + 1); 
 setLoading(false); 
 }).catch((error) => {
console.error('Error adding todo:', error);
 setLoading(false); 
 });
};

Quando um usuário insere dados no campo de entrada de tarefas e clica no botão Adicionar tarefas botão, o código atualiza o novoTodo estado com a entrada do usuário. Em seguida, ele envia uma solicitação POST simulada para a API com o novo objeto de dados no corpo da solicitação para salvá-lo no banco de dados na memória.

Se a solicitação POST for bem-sucedida, o código adiciona o novo item ao todos array e, finalmente, aciona a nova renderização do componente para mostrar o novo item de tarefa.

Solicitações simuladas de DELETE da API

Agora, defina a lógica para exclusão de dados por meio de solicitações simuladas de API DELETE. Este processo envolve o envio de uma solicitação DELETE para remover o item pendente do banco de dados na memória. Se tiver sucesso, atualize ambos os todos e carregando estado para refletir o processo de exclusão.

const handleDelete = (id) => { 
let deleteInProgress = true;
 fetch(`/api/todos/${id}`, {
 method: 'DELETE',
 }).then((response) => {
if (response.status 204) {
returnnull;
 } else {
return response.json();
 }
 }) .then((data) => {
if (data && data.error) {
console.error('Error deleting todo:', data.error);
 } else { 
 setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
 setRenderKey((prevKey) => prevKey + 1);
 }
 deleteInProgress = false;
 }).catch((error) => {
console.error('Error deleting todo:', error);
 deleteInProgress = false;
 }) .finally(() => {
 setLoading(deleteInProgress);
 });
 };

Lembre-se de que esse processo só pode excluir dados recém-adicionados, não os dados iniciais.

Por fim, importe o Lista de afazeres componente no Aplicativo.jsx arquivo para renderizá-lo no DOM.

import TodoList from'./components/TodoList';
//code ...

Ótimo! Depois de iniciar o servidor de desenvolvimento, você pode buscar os dados iniciais e adicionar e excluir novos dados da API simulada em seu aplicativo React.

Usando APIs simuladas para acelerar o desenvolvimento

Simular APIs é uma ótima maneira de acelerar o desenvolvimento de front-end, esteja você trabalhando em um projeto individualmente ou como parte de uma equipe. Ao usar APIs simuladas, você pode construir rapidamente a IU e testar seu código sem esperar que o back-end seja concluído.