Hoe u nep-API's kunt bouwen en gebruiken in React-apps met behulp van Mirage.js

Bij het ontwikkelen van full-stack-applicaties is een aanzienlijk deel van het frontend-werk afhankelijk van realtime gegevens uit de backend.

Dit kan betekenen dat u moet wachten met het ontwikkelen van de gebruikersinterface totdat de API beschikbaar is voor gebruik. Wachten tot de API klaar is om de frontend in te stellen, kan de productiviteit echter aanzienlijk verlagen en de projecttijdlijnen verlengen.

Een goede oplossing voor deze uitdaging is het gebruik van nep-API's. Met deze API's kunt u ontwikkelen en test uw frontend met behulp van gegevens die de structuur van de echte gegevens nabootsen, allemaal zonder te vertrouwen op de werkelijke gegevens API.

Aan de slag met Mirage.js Mock-API's

Mirage.js is een JavaScript-bibliotheek waarmee u nep-API's kunt maken, compleet met een testserver die aan de clientzijde van uw webapplicatie draait. Dit betekent dat u uw frontend-code kunt testen zonder dat u zich zorgen hoeft te maken over de beschikbaarheid of het gedrag van uw echte backend-API.

Als u Mirage.js wilt gebruiken, moet u eerst nep-API-eindpunten maken en de antwoorden definiëren die deze moeten retourneren. Vervolgens onderschept Mirage.js alle HTTP-verzoeken die uw frontend-code doet en retourneert in plaats daarvan de nepreacties.

Zodra uw API klaar is, kunt u eenvoudig overschakelen naar het gebruik ervan door alleen de configuratie van Mirage.js te wijzigen.

Hier vindt u de broncode van dit project GitHub opslagplaats.

Maak een nep-API-server met Mirage.js

Om te demonstreren hoe u nep-API's instelt, bouwt u een eenvoudige React-app die gebruikmaakt van een Mirage.js-backend. Maar eerst, maak een React-applicatie met behulp van de opdracht create-react-app. Als alternatief kunt u gebruiken Vite om een ​​React-project op te zetten. Installeer vervolgens de Mirage.js-afhankelijkheid.

npm install --save-dev miragejs

Om nu een Mirage.js-serverinstantie te maken om verzoeken te onderscheppen en API-reacties na te bootsen, gebruikt u de creëerServer methode. Deze methode gebruikt een configuratieobject als parameter.

Dit object omvat de omgeving En naamruimte voor de API. De omgeving specificeert de ontwikkelingsfase waarin de API zich bevindt, zoals ontwikkeling, terwijl de naamruimte het voorvoegsel is dat aan alle API-eindpunten wordt toegevoegd.

Maak een nieuwe src/server.js bestand en voeg de volgende code toe:

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

Indien nodig kunt u de naamruimte aanpassen aan de URL-structuur van uw daadwerkelijke API, inclusief het opgeven van de versie. Op deze manier kunt u, zodra uw API klaar is, deze eenvoudig integreren in uw front-endapplicatie met minimale codewijzigingen.

Bovendien kunt u binnen de configuratie van de serverinstance ook een datamodel definiëren om de opslag en het ophalen van gegevens in de nepomgeving te simuleren.

Start ten slotte de Mirage.js-server door het serverobject in uw index.jsx of hoofd.jsx bestand als volgt:

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

Voeg Seed-gegevens toe aan de Mock-API

Mirage.js heeft een database in het geheugen die u kunt gebruiken om de nep-API vooraf in te vullen met initiële startgegevens en om testgegevens vanuit uw clienttoepassing te beheren. Dit betekent dat u de testgegevens kunt opslaan en ophalen uit de nepdatabase en deze kunt gebruiken in uw clienttoepassing.

Als u zaadgegevens aan de Mock API wilt toevoegen, voegt u de volgende code toe in de server.js bestand direct onder de modellen voorwerp.

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

De zaden functie vult een Mirage.js-server met drie actiepunten, elk met een titel en beschrijving. Optioneel kunt u, in plaats van de testgegevens hard te coderen, een bibliotheek zoals Faker.js om de benodigde testgegevens te genereren.

Definieer de Mock API-routes

Definieer nu enkele API-routes voor de nep-API. Geef in dit geval routes op voor het afhandelen van GET-, POST- en DELETE-nep-API-verzoeken.

Voeg direct onder de zaadgegevens de onderstaande code toe:

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

Bouw een React-client

Nu de nep-API is opgezet, gaan we een React-client bouwen om met de API-eindpunten te communiceren en deze te gebruiken. Je bent vrij om elke UI-componentenbibliotheek te gebruiken die je leuk vindt, maar deze gids gebruikt de Chakra UI om de app vorm te geven.

Installeer eerst deze afhankelijkheden:

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

Maak vervolgens een nieuwe src/components/TodoList.jsx bestand en voeg de volgende code toe:

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

Definieer nu een functionele component om de gebruikersinterface van de takenlijst weer te geven, inclusief de invoervelden voor het toevoegen van nieuwe taken en een lijst met bestaande taken.

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

Definieer nu de handlerfuncties voor de toevoeg- en verwijderbewerkingen. Maar voeg eerst deze staten toe. Als alternatief kunt u dat ook doen gebruik de useReducer hook om de statusbeheerlogica te definiëren voor de takenlijst-app.

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

Definieer nu de logica om de startgegevens op te halen en weer te geven in de database in het geheugen wanneer de toepassing voor het eerst in de browser wordt geladen door de ophalen methode in een gebruikEffect haak.

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

De renderKey state is ook opgenomen in het useEffect om ervoor te zorgen dat de code een nieuwe weergave van nieuw toegevoegde gegevens in de in-memory database activeert wanneer de server actief is.

Simpel gezegd: telkens wanneer een gebruiker nieuwe taakgegevens aan de Mirage.js-database toevoegt, wordt de component opnieuw weergegeven om de bijgewerkte gegevens weer te geven.

Gegevens toevoegen aan de API

Definieer nu de logica voor het toevoegen van gegevens aan de API via POST-aanvragen. Voeg direct onder de useEffect-hook de volgende code toe.

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

Wanneer een gebruiker gegevens invoert in het taakinvoerveld en op de knop klikt Todo toevoegen knop, de code werkt de nieuwTodo status met de invoer van de gebruiker. Vervolgens stuurt het een nep-POST-verzoek naar de API met het nieuwe gegevensobject in de verzoektekst om het op te slaan in de in-memory database.

Als het POST-verzoek succesvol is, voegt de code het nieuwe item toe aan het alles array, en ten slotte activeert het onderdeel opnieuw renderen om het nieuwe taakitem weer te geven.

Mock API DELETE-verzoeken

Definieer nu de logica voor het verwijderen van gegevens via DELETE nep-API-verzoeken. Dit proces omvat het verzenden van een DELETE-verzoek om het actiepunt uit de database in het geheugen te verwijderen. Als dit lukt, update dan zowel de alles En bezig met laden staat om het verwijderingsproces weer te geven.

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

Houd er rekening mee dat dit proces alleen nieuw toegevoegde gegevens kan verwijderen, niet de startgegevens.

Importeer ten slotte de Te doen lijst onderdeel in de App.jsx bestand om het in de DOM weer te geven.

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

Geweldig! Zodra u de ontwikkelingsserver start, kunt u de startgegevens ophalen en nieuwe gegevens toevoegen aan en verwijderen uit de nep-API in uw React-app.

Mock-API's gebruiken om de ontwikkeling te versnellen

Het bespotten van API's is een geweldige manier om de ontwikkeling van de frontend te versnellen, of u nu individueel of als onderdeel van een team aan een project werkt. Door Mock API's te gebruiken, kunt u snel de gebruikersinterface bouwen en de code testen zonder te wachten tot de backend voltooid is.