Cómo crear y consumir API simuladas en aplicaciones React usando Mirage.js

Al desarrollar aplicaciones full-stack, una parte importante del trabajo del frontend depende de datos en tiempo real del backend.

Esto puede significar que debe posponer el desarrollo de la interfaz de usuario hasta que la API esté disponible para su uso. Sin embargo, esperar a que la API esté lista para configurar la interfaz puede reducir considerablemente la productividad y ampliar los plazos del proyecto.

Una excelente solución a este desafío implica el uso de API simuladas. Estas API le permiten desarrollar y Pruebe su interfaz utilizando datos que imiten la estructura de los datos reales, todo sin depender de la información real. API.

Introducción a las API simuladas de Mirage.js

Mirage.js es una biblioteca de JavaScript que le permite crear API simuladas, completa con un servidor de prueba que se ejecuta en el lado del cliente de su aplicación web. Esto significa que puede probar su código frontend sin necesidad de preocuparse por la disponibilidad o el comportamiento de su API backend real.

Para utilizar Mirage.js, primero debe crear puntos finales de API simulados y definir las respuestas que deben devolver. Luego, Mirage.js intercepta todas las solicitudes HTTP que realiza su código de interfaz y, en su lugar, devuelve respuestas simuladas.

Una vez que su API esté lista, puede pasar fácilmente a usarla cambiando solo la configuración de Mirage.js.

Puedes encontrar el código fuente de este proyecto en este GitHub repositorio.

Cree un servidor API simulado con Mirage.js

Para demostrar cómo configurar API simuladas, creará una aplicación React de tareas sencilla que utiliza un backend de Mirage.js. Pero primero, cree una aplicación React usando el comando create-react-app. Alternativamente, puedes usar Invite a montar un proyecto React. A continuación, instale la dependencia Mirage.js.

npm install --save-dev miragejs

Ahora, para crear una instancia de servidor Mirage.js para interceptar solicitudes y simular respuestas API, use el crearservidor método. Este método toma un objeto de configuración como parámetro.

Este objeto incluye el ambiente y espacio de nombres para la API. El entorno especifica la etapa de desarrollo en la que se encuentra la API, como desarrollo, mientras que el espacio de nombres es el prefijo agregado a todos los puntos finales de la API.

Crear un nuevo src/servidor.js archivo e incluya el siguiente 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;
}

Si es necesario, puede personalizar el espacio de nombres para que coincida con la estructura de URL de su API real, incluida la especificación de la versión. De esta manera, una vez que su API esté lista, podrá integrarla fácilmente en su aplicación front-end con cambios mínimos de código.

Además, dentro de la configuración de la instancia del servidor, también puede definir un modelo de datos para simular el almacenamiento y la recuperación de datos en el entorno simulado.

Finalmente, inicie el servidor Mirage.js importando el objeto del servidor en su index.jsx o principal.jsx archivo de la siguiente manera:

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>,
)

Agregar datos semilla a la API simulada

Mirage.js tiene una base de datos en memoria que puede usar para completar previamente la API simulada con datos iniciales y para administrar datos de prueba desde su aplicación cliente. Esto significa que puede almacenar y recuperar los datos de prueba de la base de datos simulada y utilizarlos en su aplicación cliente.

Para agregar datos iniciales a la API simulada, agregue el siguiente código en el servidor.js archivo justo debajo del 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.',
 });
 },

El semillas La función completa un servidor Mirage.js con tres tareas pendientes, cada una con un título y una descripción. Opcionalmente, en lugar de codificar los datos de prueba, puede integrar una biblioteca como Faker.js para generar los datos de prueba requeridos.

Definir las rutas API simuladas

Ahora, defina algunas rutas API para la API simulada. En este caso, especifique rutas para manejar solicitudes de API simuladas GET, POST y DELETE.

Justo debajo de los datos iniciales, agregue el siguiente código:

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(); 
 });
 }

Construya un cliente de reacción

Ahora que la API simulada está configurada, creemos un cliente React para interactuar y consumir los puntos finales de la API. Eres libre de utilizar cualquier biblioteca de componentes de interfaz de usuario que desees, pero esta guía utilizará la interfaz de usuario de Chakra para diseñar la aplicación.

Primero, instale estas dependencias:

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

A continuación, cree un nuevo src/components/TodoList.jsx archivo e incluya el siguiente código:

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

Ahora, defina un componente funcional para representar la interfaz de usuario de la lista de tareas pendientes, incluidos los campos de entrada para agregar nuevas tareas y una lista de tareas 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>
 );
}

Ahora, defina las funciones del controlador para las operaciones de agregar y eliminar. Pero primero, agregue estos estados. Alternativamente, puedes use el gancho useReducer para definir la lógica de administración del estado para la aplicación de lista de tareas pendientes.

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

Ahora, defina la lógica para recuperar y mostrar los datos semilla en la base de datos en memoria cuando la aplicación se carga por primera vez en el navegador ajustando el buscar método en un usoEfecto gancho.

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

El renderClave El estado también se incluye en useEffect para garantizar que el código active una nueva representación de los datos recién agregados en la base de datos en memoria cuando el servidor se está ejecutando.

En pocas palabras, cada vez que un usuario agrega nuevos datos de tareas pendientes a la base de datos de Mirage.js, el componente se volverá a representar para mostrar los datos actualizados.

Agregar datos a la API

Ahora, defina la lógica para agregar datos a la API mediante solicitudes POST. Justo debajo del gancho useEffect, incluya el siguiente código.

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); 
 });
};

Cuando un usuario ingresa datos en el campo de entrada de tareas pendientes y hace clic en el Agregar todo botón, el código actualiza el nuevoTodo estado con la entrada del usuario. Luego, envía una solicitud POST simulada a la API con el nuevo objeto de datos en el cuerpo de la solicitud para guardarlo en la base de datos en memoria.

Si la solicitud POST tiene éxito, el código agrega el nuevo elemento al todos matriz y, finalmente, activa el renderizado del componente para mostrar la nueva tarea pendiente.

Solicitudes de eliminación de API simuladas

Ahora, defina la lógica para eliminar datos mediante DELETE solicitudes API simuladas. Este proceso implica enviar una solicitud DELETE para eliminar la tarea pendiente de la base de datos en memoria. Si tiene éxito, actualice tanto el todos y cargando estado para reflejar el proceso de eliminación.

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);
 });
 };

Tenga en cuenta que este proceso solo puede eliminar los datos recién agregados, no los datos iniciales.

Finalmente importe el Lista de quehaceres componente en el aplicación.jsx archivo para renderizarlo en el DOM.

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

¡Excelente! Una vez que inicie el servidor de desarrollo, puede recuperar los datos iniciales y agregar y eliminar datos nuevos de la API simulada en su aplicación React.

Uso de API simuladas para acelerar el desarrollo

Simular API es una excelente manera de acelerar el desarrollo frontend, ya sea que esté trabajando en un proyecto individualmente o como parte de un equipo. Al utilizar API simuladas, puede crear rápidamente la interfaz de usuario y probar su código sin esperar a que se complete el backend.