Har du inte API: et redo? Inga problem! Utveckla och använd mock API: er med Mirage.js.

När man utvecklar full-stack-applikationer förlitar sig en betydande del av frontend-arbetet på realtidsdata från backend.

Detta kan innebära att du måste vänta med att utveckla användargränssnittet tills API: et är tillgängligt för användning. Men att vänta på att API: et är redo för att konfigurera frontend kan avsevärt minska produktiviteten och förlänga projekttidslinjer.

En bra lösning på den här utmaningen innebär att använda sken-API: er. Dessa API: er låter dig utveckla och testa din frontend med hjälp av data som efterliknar strukturen hos den verkliga datan, allt utan att förlita sig på den faktiska API.

Komma igång med Mirage.js Mock API: er

Mirage.js är ett JavaScript-bibliotek som låter dig skapa sken-API: er, komplett med en testserver som körs på klientsidan av din webbapplikation. Detta innebär att du kan testa din frontend-kod utan att behöva oroa dig för tillgängligheten eller beteendet hos ditt riktiga backend-API.

instagram viewer

För att använda Mirage.js måste du först skapa mock API-slutpunkter och definiera de svar som de ska returnera. Sedan avlyssnar Mirage.js alla HTTP-förfrågningar som din frontend-kod gör och returnerar skensvaren istället.

När ditt API är klart kan du enkelt byta till att använda det genom att bara ändra konfigurationen av Mirage.js.

Du kan hitta detta projekts källkod i denna GitHub förvaret.

Skapa en Mock API-server med Mirage.js

För att demonstrera hur du ställer in mock-API: er bygger du en enkel att göra-React-app som använder en Mirage.js-backend. Men först, skapa en React-applikation med kommandot create-react-app. Alternativt kan du använda Vite att starta ett React-projekt. Installera sedan Mirage.js dependency.

npm install --save-dev miragejs

Nu, för att skapa en Mirage.js-serverinstans för att fånga upp förfrågningar och håna API-svar, använd skapaServer metod. Denna metod tar ett konfigurationsobjekt som en parameter.

Detta objekt inkluderar miljö och namnutrymme för API. Miljön specificerar utvecklingsstadiet som API: et befinner sig i, till exempel utveckling medan namnområdet är prefixet som läggs till alla API-slutpunkter.

Skapa en ny src/server.js fil och inkludera följande kod:

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 det behövs kan du anpassa namnutrymmet för att matcha URL-strukturen för ditt faktiska API, inklusive ange version. På så sätt, när ditt API är klart, kan du enkelt integrera det i din front-end-applikation med minimala kodändringar.

Dessutom, inom serverinstanskonfigurationen, kan du också definiera en datamodell för att simulera datalagring och hämtning i skenmiljön.

Starta slutligen Mirage.js-servern genom att importera serverobjektet i din index.jsx eller main.jsx fil enligt följande:

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

Lägg till Seed Data till Mock API

Mirage.js har en databas i minnet som du kan använda för att i förväg fylla i mock-API: et med initiala frödata och för att hantera testdata från din klientapplikation. Detta innebär att du kan lagra och hämta testdata från skendatabasen och använda den i din klientapplikation.

För att lägga till frödata till Mock API, lägg till följande kod i server.js fil precis 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.',
 });
 },

De frön funktionen fyller en Mirage.js-server med tre att göra-objekt, var och en med en titel och en beskrivning. Alternativt, istället för att hårdkoda testdata, kan du integrera ett bibliotek som t.ex Faker.js för att generera nödvändiga testdata.

Definiera Mock API-rutter

Definiera nu några API-rutter för sken-API: et. I det här fallet, ange rutter för att hantera GET, POST och DELETE mock API-förfrågningar.

Precis under frödata, lägg till koden nedan:

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

Nu när mock-API: et är konfigurerat, låt oss bygga en React-klient för att interagera med och konsumera API-slutpunkterna. Du är fri att använda alla UI-komponentbibliotek du vill, men den här guiden kommer att använda Chakra UI för att styla appen.

Installera först dessa beroenden:

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

Skapa sedan en ny src/components/TodoList.jsx fil och inkludera följande kod:

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

Definiera nu en funktionell komponent för att återge att-göra-listans användargränssnitt, inklusive inmatningsfälten för att lägga till nya uppgifter och en lista över befintliga uppgifter.

exportdefaultfunctionTodoList() {
return (

"xl" mb={4}>Todo List</Text>
4}>
 type="text"
 name="body"
 value={newTodo.body}
 onChange={handleInputChange}
 />
 </FormControl>
 colorScheme="red"
 size="sm"
 onClick={() => handleDelete(todo.id)}>Delete 
 </Button>
 </Flex>
 </Box>
 ))
 )}
 </Container>
 );
}

Definiera nu hanterarfunktionerna för lägg till och ta bort operationer. Men först, lägg till dessa stater. Alternativt kan du använd useReducer-kroken för att definiera logiken för tillståndshantering för att göra-listan-appen.

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

Definiera nu logiken för att hämta och visa frödata i minnesdatabasen när applikationen först laddas i webbläsaren genom att slå in hämta metod i en useEffect krok.

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

De renderKey state ingår också i useEffect för att säkerställa att koden utlöser en återrendering av nyligen tillagda data i minnesdatabasen när servern körs.

Enkelt uttryckt, närhelst en användare lägger till ny att-göra-data till Mirage.js-databasen – kommer komponenten att återrenderas för att visa uppdaterad data.

Lägga till data till API

Definiera nu logiken för att lägga till data till API: t genom POST-förfrågningar. Inkludera följande kod precis under useEffect-kroken.

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 användare anger data i att göra-inmatningsfältet och klickar på Lägg till Todo knappen uppdaterar koden newTodo tillstånd med användarens input. Sedan skickar den en falsk POST-begäran till API: t med det nya dataobjektet i förfrågningskroppen för att spara det i minnesdatabasen.

Om POST-begäran lyckas, lägger koden till det nya objektet till todos array, och slutligen triggar komponenten återrendera för att visa det nya att göra-objektet.

Mock API DELETE-förfrågningar

Definiera nu logiken för att radera data genom DELETE mock API-förfrågningar. Denna process innebär att en DELETE-begäran skickas för att ta bort att-göra-objektet från minnesdatabasen. Om det lyckas, uppdatera både todos och läser in tillstånd för att återspegla raderingsprocessen.

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

Tänk på att den här processen bara kan radera nytillagda data, inte frödata.

Till sist, importera Att göra lista komponent i App.jsx fil för att rendera den i DOM.

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

Bra! När du väl har startat utvecklingsservern kan du hämta frödata och lägga till och ta bort ny data från mock API i din React-app.

Använda Mock API: er för att påskynda utvecklingen

Mocking APIs är ett utmärkt sätt att påskynda frontend-utvecklingen, oavsett om du arbetar med ett projekt individuellt eller som en del av ett team. Genom att använda Mock API: er kan du snabbt bygga användargränssnittet och testa deras kod utan att vänta på att backend ska vara komplett.