Hvordan bygge og konsumere mock-API-er i React-apper ved å bruke Mirage.js

Når du utvikler fullstack-applikasjoner, er en betydelig del av frontend-arbeidet avhengig av sanntidsdata fra backend.

Dette kan bety at du må vente med å utvikle brukergrensesnittet til API er tilgjengelig for bruk. Å vente på at API-en er klar til å sette opp frontend kan imidlertid redusere produktiviteten betraktelig og forlenge prosjekttidslinjer.

En god løsning på denne utfordringen innebærer å bruke mock APIer. Disse API-ene lar deg utvikle og test grensesnittet ditt ved å bruke data som etterligner strukturen til de virkelige dataene, alt uten å stole på de faktiske API.

Komme i gang med Mirage.js Mock APIer

Mirage.js er et JavaScript-bibliotek som lar deg lage falske APIer, komplett med en testserver som kjører på klientsiden av nettapplikasjonen din. Dette betyr at du kan teste frontend-koden din uten å måtte bekymre deg for tilgjengeligheten eller oppførselen til din virkelige backend API.

For å bruke Mirage.js må du først lage falske API-endepunkter og definere svarene de skal returnere. Deretter avskjærer Mirage.js alle HTTP-forespørsler som grensesnittkoden din lager og returnerer de falske svarene i stedet.

Når API-en din er klar, kan du enkelt bytte til å bruke den ved kun å endre konfigurasjonen av Mirage.js.

Du finner dette prosjektets kildekode i denne GitHub oppbevaringssted.

Opprett en Mock API-server med Mirage.js

For å demonstrere hvordan du setter opp mock APIer, bygger du en enkel React-app som bruker en Mirage.js-backend. Men først, opprette en React-applikasjon ved å bruke kommandoen create-react-app. Alternativt kan du bruke Vite å sette opp et React-prosjekt. Installer deretter Mirage.js-avhengighet.

npm install --save-dev miragejs

Nå, for å lage en Mirage.js-serverforekomst for å avskjære forespørsler og håne API-svar, bruk oppretteServer metode. Denne metoden tar et konfigurasjonsobjekt som en parameter.

Dette objektet inkluderer miljø og navneområde for API. Miljøet spesifiserer utviklingsstadiet som API-en er på, for eksempel utvikling mens navneområdet er prefikset som legges til alle API-endepunkter.

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

Om nødvendig kan du tilpasse navneområdet slik at det samsvarer med URL-strukturen til det faktiske API-et ditt, inkludert å spesifisere versjonen. På denne måten, når API-en er klar, kan du enkelt integrere den i front-end-applikasjonen din med minimale kodeendringer.

I tillegg, innenfor serverforekomstkonfigurasjonen, kan du også definere en datamodell for å simulere datalagring og henting i det falske miljøet.

Til slutt starter du Mirage.js-serveren ved å 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>,
)

Legg til frødata til Mock API

Mirage.js har en database i minnet som du kan bruke til å forhåndsutfylle mock API med innledende frødata og for å administrere testdata fra klientapplikasjonen din. Dette betyr at du kan lagre og hente testdataene fra den falske databasen og bruke dem i klientapplikasjonen din.

For å legge til frødata til Mock API, legg til følgende kode i server.js fil rett under modeller gjenstand.

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 frø funksjonen fyller en Mirage.js-server med tre gjøremål, hver med en tittel og beskrivelse. Eventuelt, i stedet for å hardkode testdataene, kan du integrere et bibliotek som f.eks Faker.js for å generere de nødvendige testdataene.

Definer Mock API-rutene

Definer nå noen API-ruter for mock API. I dette tilfellet spesifiser ruter for å håndtere GET, POST og DELETE mock API-forespørsler.

Rett under frødataene legger du til 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(); 
 });
 }

Bygg en React-klient

Nå som mock API er satt opp, la oss bygge en React-klient for å samhandle med og konsumere API-endepunktene. Du står fritt til å bruke et hvilket som helst UI-komponentbibliotek du liker, men denne guiden vil bruke Chakra UI til å style appen.

Installer først disse avhengighetene:

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

Deretter oppretter du en ny src/components/TodoList.jsx fil, og ta med følgende kode:

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

Definer nå en funksjonell komponent for å gjengi oppgavelistens brukergrensesnitt, inkludert inndatafeltene for å legge til nye oppgaver og en liste over eksisterende oppgaver.

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 nå behandlerfunksjonene for legg til og slett-operasjoner. Men først, legg til disse statene. Alternativt kan du bruk useReducer-kroken for å definere tilstandsstyringslogikken for gjøremålsliste-appen.

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

Definer nå logikken for å hente og vise frødataene i minnedatabasen når applikasjonen først lastes inn i nettleseren ved å pakke inn hente metode i en useEffect krok.

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

De renderKey state er også inkludert i useEffect for å sikre at koden utløser en gjengivelse av nylig lagt til data i minnedatabasen når serveren kjører.

Enkelt sagt, hver gang en bruker legger til nye gjøremålsdata til Mirage.js-databasen – vil komponenten gjengis på nytt for å vise de oppdaterte dataene.

Legge til data til API

Definer nå logikken for å legge til data til API-en gjennom POST-forespørsler. Rett under useEffect-kroken inkluderer 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 bruker legger inn data i oppgavefeltet og klikker på Legg til Todo knappen, oppdaterer koden newTodo tilstand med brukerens input. Deretter sender den en falsk POST-forespørsel til API-en med det nye dataobjektet i forespørselskroppen for å lagre det i minnedatabasen.

Hvis POST-forespørselen er vellykket, legger koden det nye elementet til todos array, og til slutt utløser komponenten gjengivelse for å vise det nye gjøremålselementet.

Mock API SLETTE-forespørsler

Definer nå logikken for å slette data gjennom DELETE mock API-forespørsler. Denne prosessen innebærer å sende en SLETT-forespørsel om å fjerne gjøremålselementet fra minnedatabasen. Hvis det lykkes, oppdater både todos og lasting tilstand for å gjenspeile sletteprosessen.

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 prosessen bare kan slette nylig lagt til data, ikke frødataene.

Til slutt importerer du Gjøremålsliste komponent i App.jsx fil for å gjengi den i DOM.

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

Flott! Når du starter utviklingsserveren, kan du hente frødataene og legge til og slette nye data fra mock API i React-appen din.

Bruke Mock API-er for å øke hastigheten på utviklingen

Mocking APIer er en fin måte å akselerere frontend-utvikling, enten du jobber med et prosjekt individuelt eller som en del av et team. Ved å bruke Mock API-er kan du raskt bygge brukergrensesnittet og teste koden deres uten å vente på at backend-en er komplett.