Hvordan man bygger og bruger Mock API'er i React Apps ved hjælp af Mirage.js

Når man udvikler full-stack-applikationer, er en betydelig del af frontend-arbejdet afhængig af realtidsdata fra backend.

Det kan betyde, at du skal vente med at udvikle brugergrænsefladen, indtil API'en er tilgængelig til brug. Men at vente på, at API'en er klar til at konfigurere frontend'en, kan reducere produktiviteten betydeligt og forlænge projektets tidslinjer.

En god løsning på denne udfordring involverer at bruge mock API'er. Disse API'er giver dig mulighed for at udvikle og test din frontend ved hjælp af data, der efterligner strukturen af ​​de rigtige data, alt sammen uden at stole på det faktiske API.

Kom godt i gang med Mirage.js Mock API'er

Mirage.js er et JavaScript-bibliotek, der lader dig oprette mock API'er, komplet med en testserver, der kører på klientsiden af ​​din webapplikation. Dette betyder, at du kan teste din frontend-kode uden at skulle bekymre dig om tilgængeligheden eller adfærden af ​​din rigtige backend API.

For at bruge Mirage.js skal du først oprette mock API-slutpunkter og definere de svar, de skal returnere. Derefter opsnapper Mirage.js alle HTTP-anmodninger, som din frontend-kode laver, og returnerer de falske svar i stedet.

Når din API er klar, kan du nemt skifte til at bruge den ved kun at ændre konfigurationen af ​​Mirage.js.

Du kan finde dette projekts kildekode i denne GitHub depot.

Opret en Mock API-server med Mirage.js

For at demonstrere, hvordan du opsætter mock API'er, skal du bygge en simpel React-app, der skal gøres, der bruger en Mirage.js-backend. Men først, opret en React-applikation ved at bruge kommandoen create-react-app. Alternativt kan du bruge Vite til at oprette et React-projekt. Installer derefter Mirage.js afhængighed.

npm install --save-dev miragejs

Brug nu for at oprette en Mirage.js-serverinstans til at opsnappe anmodninger og håne API-svar opretteServer metode. Denne metode tager et konfigurationsobjekt som en parameter.

Dette objekt omfatter miljø og navneområde for API. Miljøet specificerer det udviklingsstadium, som API'en er på, såsom udvikling, mens navneområdet er præfikset, der tilføjes til alle API-endepunkter.

Opret en ny src/server.js fil og inkludere følgende kode:

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

Hvis det er nødvendigt, kan du tilpasse navneområdet, så det matcher URL-strukturen for din faktiske API, herunder angive versionen. På denne måde, når din API er klar, kan du nemt integrere den i din frontend-applikation med minimale kodeændringer.

Derudover kan du inden for serverforekomstkonfigurationen også definere en datamodel til at simulere datalagring og -hentning i det mock-miljø.

Til sidst skal du starte Mirage.js-serveren ved at importere serverobjektet i din index.jsx eller main.jsx fil som følger:

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

Tilføj frødata til Mock API

Mirage.js har en database i hukommelsen, som du kan bruge til at forudbefolke mock-API'en med indledende basisdata og til at administrere testdata fra din klientapplikation. Det betyder, at du kan gemme og hente testdataene fra mock-databasen og bruge dem i din klientapplikation.

For at tilføje frødata til Mock API skal du tilføje følgende kode i server.js fil lige under modeller 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.',
 });
 },

Det frø funktionen udfylder en Mirage.js-server med tre opgavepunkter, hver med en titel og beskrivelse. Eventuelt kan du i stedet for at hårdkode testdataene integrere et bibliotek som f.eks Faker.js at generere de nødvendige testdata.

Definer Mock API-ruterne

Definer nu nogle API-ruter for den mock API. I dette tilfælde skal du angive ruter til at håndtere GET, POST og DELETE mock API-anmodninger.

Lige under frødataene skal du tilføje koden nedenfor:

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

Byg en React Client

Nu hvor mock API er sat op, lad os bygge en React-klient til at interagere med og forbruge API-endepunkterne. Du kan frit bruge et hvilket som helst UI-komponentbibliotek, du kan lide, men denne guide vil bruge Chakra UI til at style appen.

Først skal du installere disse afhængigheder:

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

Opret derefter en ny src/components/TodoList.jsx fil, og inkluder følgende kode:

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

Definer nu en funktionel komponent til at gengive opgavelistens brugergrænseflade, inklusive inputfelterne til tilføjelse af nye opgaver og en liste over eksisterende opgaver.

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

Definer nu behandlerfunktionerne for tilføjelse og sletning. Men først tilføje disse stater. Alternativt kan du brug useReducer-krogen til at definere tilstandsstyringslogikken til to-do liste-appen.

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

Definer nu logikken for at hente og vise frødataene i databasen i hukommelsen, når applikationen først indlæses i browseren ved at pakke hente metode i en useEffect krog.

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

Det renderNøgle tilstand er også inkluderet i useEffect for at sikre, at koden udløser en gengivelse af nyligt tilføjede data i databasen i hukommelsen, når serveren kører.

Kort sagt, hver gang en bruger tilføjer nye gøremålsdata til Mirage.js-databasen – gengives komponenten igen for at vise de opdaterede data.

Tilføjelse af data til API

Definer nu logikken for tilføjelse af data til API'en gennem POST-anmodninger. Lige under useEffect-krogen skal du inkludere følgende kode.

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

Når en bruger indtaster data i opgave-indtastningsfeltet og klikker på Tilføj Todo knappen, opdaterer koden newTodo tilstand med brugerens input. Derefter sender den en falsk POST-anmodning til API'et med det nye dataobjekt i anmodningsteksten for at gemme det i databasen i hukommelsen.

Hvis POST-anmodningen lykkes, føjer koden det nye element til todos array, og til sidst udløser komponenten genrender for at vise det nye opgaveelement.

Mock API DELETE-anmodninger

Definer nu logikken for sletning af data gennem DELETE mock API-anmodninger. Denne proces involverer at sende en DELETE-anmodning om at fjerne opgaveelementet fra databasen i hukommelsen. Hvis det lykkes, skal du opdatere både todos og Indlæser tilstand for at afspejle sletningsprocessen.

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

Husk, at denne proces kun kan slette nyligt tilføjede data, ikke frødataene.

Til sidst importerer du TodoList komponent i App.jsx fil for at gengive den i DOM.

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

Store! Når du starter udviklingsserveren, kan du hente frødataene og tilføje og slette nye data fra mock-API'en i din React-app.

Brug af Mock API'er til at fremskynde udviklingen

Mocking API'er er en fantastisk måde at fremskynde frontend-udvikling, uanset om du arbejder på et projekt individuelt eller som en del af et team. Ved at bruge Mock API'er kan du hurtigt bygge brugergrænsefladen og teste deres kode uden at vente på, at backend er komplet.