So erstellen und nutzen Sie Mock-APIs in React-Apps mit Mirage.js

Bei der Entwicklung von Full-Stack-Anwendungen basiert ein erheblicher Teil der Frontend-Arbeit auf Echtzeitdaten vom Backend.

Dies kann bedeuten, dass Sie mit der Entwicklung der Benutzeroberfläche warten müssen, bis die API zur Verwendung verfügbar ist. Allerdings kann das Warten darauf, dass die API für die Einrichtung des Frontends bereit ist, die Produktivität erheblich verringern und die Projektlaufzeit verlängern.

Eine gute Lösung für diese Herausforderung ist die Verwendung von Schein-APIs. Mit diesen APIs können Sie entwickeln und Testen Sie Ihr Frontend mit Daten, die die Struktur der realen Daten nachahmen, ohne sich auf die tatsächlichen Daten zu verlassen API.

Erste Schritte mit Mirage.js-Mock-APIs

Mirage.js ist eine JavaScript-Bibliothek, mit der Sie Schein-APIs erstellen können, einschließlich eines Testservers, der auf der Clientseite Ihrer Webanwendung ausgeführt wird. Das bedeutet, dass Sie Ihren Frontend-Code testen können, ohne sich Gedanken über die Verfügbarkeit oder das Verhalten Ihrer echten Backend-API machen zu müssen.

Um Mirage.js verwenden zu können, müssen Sie zunächst Schein-API-Endpunkte erstellen und die Antworten definieren, die sie zurückgeben sollen. Anschließend fängt Mirage.js alle HTTP-Anfragen ab, die Ihr Frontend-Code stellt, und gibt stattdessen die Scheinantworten zurück.

Sobald Ihre API bereit ist, können Sie ganz einfach auf deren Verwendung umsteigen, indem Sie lediglich die Konfiguration von Mirage.js ändern.

Den Quellcode dieses Projekts finden Sie hier GitHub Repository.

Erstellen Sie einen Mock-API-Server mit Mirage.js

Um zu demonstrieren, wie man Schein-APIs einrichtet, erstellen Sie eine einfache React-App, die ein Mirage.js-Backend verwendet. Aber zuerst, Erstellen Sie eine React-Anwendung mit dem Befehl „create-react-app“.. Alternativ können Sie verwenden Vite, um ein React-Projekt einzurichten. Als nächstes installieren Sie die Mirage.js-Abhängigkeit.

npm install --save-dev miragejs

Um nun eine Mirage.js-Serverinstanz zum Abfangen von Anfragen und Schein-API-Antworten zu erstellen, verwenden Sie die createServer Methode. Diese Methode verwendet ein Konfigurationsobjekt als Parameter.

Dieses Objekt enthält die Umfeld Und Namensraum für die API. Die Umgebung gibt den Entwicklungsstand der API an, z. B. die Entwicklung, während der Namespace das Präfix ist, das allen API-Endpunkten hinzugefügt wird.

Erstelle eine neue src/server.js Datei und fügen Sie den folgenden Code ein:

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

Bei Bedarf können Sie den Namespace anpassen, um ihn an die URL-Struktur Ihrer tatsächlichen API anzupassen, einschließlich der Angabe der Version. Auf diese Weise können Sie Ihre API, sobald sie fertig ist, mit minimalen Codeänderungen problemlos in Ihre Front-End-Anwendung integrieren.

Darüber hinaus können Sie innerhalb der Serverinstanzkonfiguration auch ein Datenmodell definieren, um die Datenspeicherung und -abfrage in der Scheinumgebung zu simulieren.

Starten Sie abschließend den Mirage.js-Server, indem Sie das Serverobjekt in Ihr importieren index.jsx oder main.jsx Datei wie folgt:

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

Fügen Sie der Mock-API Seed-Daten hinzu

Mirage.js verfügt über eine In-Memory-Datenbank, die Sie verwenden können, um die Mock-API vorab mit anfänglichen Seed-Daten zu füllen und Testdaten aus Ihrer Clientanwendung zu verwalten. Das bedeutet, dass Sie die Testdaten in der Mock-Datenbank speichern und abrufen und in Ihrer Client-Anwendung verwenden können.

Um der Mock-API Seed-Daten hinzuzufügen, fügen Sie den folgenden Code hinzu server.js Datei direkt darunter Modelle Objekt.

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

Der Samen Die Funktion füllt einen Mirage.js-Server mit drei Aufgabenelementen, jedes mit einem Titel und einer Beschreibung. Anstatt die Testdaten fest zu kodieren, können Sie optional eine Bibliothek integrieren, z Faker.js um die erforderlichen Testdaten zu generieren.

Definieren Sie die Mock-API-Routen

Definieren Sie nun einige API-Routen für die Schein-API. Geben Sie in diesem Fall Routen an, um GET-, POST- und DELETE-Mock-API-Anfragen zu verarbeiten.

Fügen Sie direkt unter den Startdaten den folgenden Code hinzu:

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

Erstellen Sie einen React-Client

Nachdem die Schein-API nun eingerichtet ist, erstellen wir einen React-Client, um mit den API-Endpunkten zu interagieren und diese zu nutzen. Es steht Ihnen frei, jede beliebige UI-Komponentenbibliothek zu verwenden, aber in diesem Handbuch wird die Chakra-Benutzeroberfläche zum Gestalten der App verwendet.

Installieren Sie zunächst diese Abhängigkeiten:

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

Als nächstes erstellen Sie ein neues src/components/TodoList.jsx Datei und fügen Sie den folgenden Code ein:

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

Definieren Sie nun eine Funktionskomponente, um die Benutzeroberfläche der Aufgabenliste darzustellen, einschließlich der Eingabefelder zum Hinzufügen neuer Aufgaben und einer Liste vorhandener Aufgaben.

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

Definieren Sie nun die Handlerfunktionen für die Hinzufügungs- und Löschvorgänge. Aber zuerst fügen Sie diese Staaten hinzu. Alternativ können Sie Verwenden Sie den useReducer-Hook, um die Statusverwaltungslogik zu definieren für die To-Do-Listen-App.

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

Definieren Sie nun die Logik zum Abrufen und Anzeigen der Seed-Daten in der In-Memory-Datenbank, wenn die Anwendung zum ersten Mal im Browser geladen wird, indem Sie sie umschließen bringen Methode in a useEffect Haken.

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

Der renderKey state ist auch im useEffect enthalten, um sicherzustellen, dass der Code bei laufendem Server ein erneutes Rendern neu hinzugefügter Daten in der In-Memory-Datenbank auslöst.

Einfach ausgedrückt: Immer wenn ein Benutzer neue Aufgabendaten zur Mirage.js-Datenbank hinzufügt, wird die Komponente erneut gerendert, um die aktualisierten Daten anzuzeigen.

Daten zur API hinzufügen

Definieren Sie nun die Logik zum Hinzufügen von Daten zur API über POST-Anfragen. Fügen Sie direkt unter dem useEffect-Hook den folgenden Code ein.

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

Wenn ein Benutzer Daten in das Aufgabeneingabefeld eingibt und auf klickt Todo hinzufügen Klicken Sie auf die Schaltfläche, der Code aktualisiert die newTodo Zustand mit der Eingabe des Benutzers. Anschließend sendet es eine simulierte POST-Anfrage mit dem neuen Datenobjekt im Anfragetext an die API, um es in der In-Memory-Datenbank zu speichern.

Wenn die POST-Anfrage erfolgreich ist, fügt der Code das neue Element zum hinzu Todos Array und löst schließlich das erneute Rendern der Komponente aus, um das neue Aufgabenelement anzuzeigen.

Schein-API-DELETE-Anfragen

Definieren Sie nun die Logik zum Löschen von Daten über DELETE-Mock-API-Anfragen. Bei diesem Vorgang wird eine DELETE-Anfrage gesendet, um das Aufgabenelement aus der In-Memory-Datenbank zu entfernen. Wenn erfolgreich, aktualisieren Sie beide Todos Und Wird geladen Status, um den Löschvorgang widerzuspiegeln.

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

Beachten Sie, dass dieser Vorgang nur neu hinzugefügte Daten löschen kann, nicht die Seed-Daten.

Zum Schluss importieren Sie die Aufgabenliste Komponente in der App.jsx Datei, um sie im DOM zu rendern.

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

Großartig! Sobald Sie den Entwicklungsserver starten, können Sie die Seed-Daten abrufen und neue Daten zur Mock-API in Ihrer React-App hinzufügen und daraus löschen.

Verwendung von Mock-APIs zur Beschleunigung der Entwicklung

Das Verspotten von APIs ist eine großartige Möglichkeit, die Frontend-Entwicklung zu beschleunigen, unabhängig davon, ob Sie einzeln oder als Teil eines Teams an einem Projekt arbeiten. Durch die Verwendung von Mock-APIs können Sie die Benutzeroberfläche schnell erstellen und ihren Code testen, ohne auf die Fertigstellung des Backends warten zu müssen.