Cum să construiți și să utilizați API-uri simulate în aplicațiile React folosind Mirage.js

Când se dezvoltă aplicații full-stack, o parte semnificativă a activității frontend se bazează pe date în timp real din backend.

Acest lucru poate însemna că trebuie să amânați dezvoltarea interfeței cu utilizatorul până când API-ul este disponibil pentru utilizare. Cu toate acestea, așteptarea ca API-ul să fie pregătit pentru configurarea frontend-ului poate reduce considerabil productivitatea și poate extinde termenele proiectului.

O soluție excelentă la această provocare implică utilizarea API-urilor simulate. Aceste API vă permit să dezvoltați și testați-vă frontend-ul folosind date care imită structura datelor reale, toate fără a vă baza pe cele reale API.

Noțiuni introductive cu API-urile simulate Mirage.js

Mirage.js este o bibliotecă JavaScript care vă permite să creați API-uri simulate, cu un server de testare care rulează pe partea client a aplicației dvs. web. Aceasta înseamnă că vă puteți testa codul de front-end fără a fi nevoie să vă faceți griji cu privire la disponibilitatea sau comportamentul API-ului dvs. backend real.

Pentru a utiliza Mirage.js, mai întâi trebuie să creați puncte finale API simulate și să definiți răspunsurile pe care ar trebui să le returneze. Apoi, Mirage.js interceptează toate solicitările HTTP pe care le face codul dvs. frontend și returnează răspunsurile simulate.

Odată ce API-ul dvs. este gata, puteți trece cu ușurință la utilizarea acestuia doar schimbând configurația Mirage.js.

Puteți găsi codul sursă al acestui proiect în aceasta GitHub repertoriu.

Creați un server API simulat cu Mirage.js

Pentru a demonstra cum să configurați API-uri simulate, veți construi o aplicație React simplă care folosește un backend Mirage.js. Dar mai intai, creați o aplicație React folosind comanda create-react-app. Alternativ, puteți utiliza Vite pentru a crea un proiect React. Apoi, instalați dependența Mirage.js.

npm install --save-dev miragejs

Acum, pentru a crea o instanță de server Mirage.js pentru a intercepta solicitările și a simula răspunsurile API, utilizați createServer metodă. Această metodă ia ca parametru un obiect de configurare.

Acest obiect include mediu inconjurator și spatiu de nume pentru API. Mediul specifică stadiul de dezvoltare în care se află API-ul, cum ar fi dezvoltarea, în timp ce spațiul de nume este prefixul adăugat la toate punctele finale API.

Creaza un nou src/server.js fișier și include următorul cod:

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

Dacă este necesar, puteți personaliza spațiul de nume pentru a se potrivi cu structura URL a API-ului dvs. real, inclusiv specificarea versiunii. În acest fel, odată ce API-ul dvs. este gata, îl puteți integra cu ușurință în aplicația dvs. front-end cu modificări minime de cod.

În plus, în configurația instanței serverului, puteți defini și un model de date pentru a simula stocarea și recuperarea datelor în mediul simulat.

În cele din urmă, porniți serverul Mirage.js importând obiectul server în dvs index.jsx sau main.jsx fișier după cum urmează:

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

Adăugați date semințe la API-ul simulat

Mirage.js are o bază de date în memorie pe care o puteți folosi pentru a prepopula API-ul simulat cu date inițiale de început și pentru a gestiona datele de testare din aplicația dvs. client. Aceasta înseamnă că puteți stoca și prelua datele de testare din baza de date simulată și le puteți utiliza în aplicația dvs. client.

Pentru a adăuga date de bază la Mock API, adăugați următorul cod în fișierul server.js fișier chiar sub modele obiect.

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.',
 });
 },

The semințe funcția populează un server Mirage.js cu trei elemente de făcut, fiecare cu un titlu și o descriere. Opțional, în loc să codificați datele de testare, puteți integra o bibliotecă precum Faker.js pentru a genera datele de testare necesare.

Definiți rutele API simulate

Acum, definiți câteva rute API pentru API-ul simulat. În acest caz, specificați rutele pentru a gestiona cererile API simulate GET, POST și DELETE.

Chiar sub datele semințelor, adăugați codul de mai jos:

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

Creați un client React

Acum că API-ul simulat este configurat, să construim un client React pentru a interacționa și a consuma punctele finale API. Sunteți liber să utilizați orice bibliotecă de componente UI care vă place, dar acest ghid va folosi Chakra UI pentru a stila aplicația.

Mai întâi, instalați aceste dependențe:

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

Apoi, creați un nou src/components/TodoList.jsx fișier și includeți următorul cod:

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

Acum, definiți o componentă funcțională pentru a reda interfața cu utilizatorul listei de activități, inclusiv câmpurile de intrare pentru adăugarea de sarcini noi și o listă de sarcini existente.

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

Acum, definiți funcțiile de gestionare pentru operațiunile de adăugare și ștergere. Dar mai întâi, adăugați aceste stări. Alternativ, puteți utilizați cârligul useReducer pentru a defini logica de gestionare a stării pentru aplicația pentru lista de activități.

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

Acum, definiți logica pentru a prelua și afișa datele de bază în baza de date în memorie atunci când aplicația se încarcă pentru prima dată în browser, împachetând aduce metoda in a useEffect cârlig.

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

The renderKey starea este de asemenea inclusă în useEffect pentru a se asigura că codul declanșează o redare a datelor nou adăugate în baza de date în memorie atunci când serverul rulează.

Mai simplu spus, ori de câte ori un utilizator adaugă noi date de rezolvat în baza de date Mirage.js — componenta se va reda pentru a afișa datele actualizate.

Adăugarea datelor la API

Acum, definiți logica pentru adăugarea datelor la API prin solicitări POST. Chiar sub cârligul useEffect, includeți următorul cod.

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

Când un utilizator introduce date în câmpul de introducere a sarcinilor de făcut și face clic pe Adăugați Todo butonul, codul actualizează nouTodo stare cu intrarea utilizatorului. Apoi, trimite o cerere POST simulată către API cu noul obiect de date în corpul cererii pentru a-l salva în baza de date în memorie.

Dacă solicitarea POST are succes, codul adaugă noul articol la toate matrice și, în cele din urmă, declanșează re-rendarea componentei pentru a afișa noul element de făcut.

Mock API DELETE Requests

Acum, definiți logica pentru ștergerea datelor prin solicitările API simulate DELETE. Acest proces implică trimiterea unei cereri DELETE pentru a elimina elementul de făcut din baza de date din memorie. Dacă reușiți, actualizați ambele toate și Se încarcă stare pentru a reflecta procesul de ștergere.

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

Rețineți că acest proces poate șterge doar datele nou adăugate, nu și datele semințelor.

În cele din urmă, importați TodoList componentă în App.jsx fișier pentru a-l reda în DOM.

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

Grozav! Odată ce porniți serverul de dezvoltare, puteți prelua datele de bază și puteți adăuga și șterge date noi din API-ul simulat în aplicația dvs. React.

Utilizarea API-urilor simulate pentru a accelera dezvoltarea

Mocking APIs este o modalitate excelentă de a accelera dezvoltarea front-end, indiferent dacă lucrați la un proiect individual sau ca parte a unei echipe. Folosind API-uri simulate, puteți construi rapid interfața de utilizare și puteți testa codul acestora fără a aștepta ca backend-ul să fie complet.