Come creare e utilizzare API fittizie nelle app React utilizzando Mirage.js

Quando si sviluppano applicazioni full-stack, una parte significativa del lavoro frontend si basa su dati in tempo reale provenienti dal backend.

Ciò può significare che è necessario trattenere lo sviluppo dell'interfaccia utente finché l'API non sarà disponibile per l'uso. Tuttavia, attendere che l'API sia pronta per configurare il frontend può ridurre notevolmente la produttività e allungare le tempistiche del progetto.

Un'ottima soluzione a questa sfida prevede l'utilizzo di API fittizie. Queste API ti consentono di sviluppare e testa il tuo frontend utilizzando dati che imitano la struttura dei dati reali, il tutto senza fare affidamento su quelli reali API.

Introduzione alle API fittizie di Mirage.js

Mirage.js è una libreria JavaScript che ti consente di creare API fittizie, complete di un server di test in esecuzione sul lato client della tua applicazione web. Ciò significa che puoi testare il tuo codice frontend senza doverti preoccupare della disponibilità o del comportamento della tua vera API backend.

Per utilizzare Mirage.js, devi prima creare endpoint API fittizi e definire le risposte che dovrebbero restituire. Quindi, Mirage.js intercetta tutte le richieste HTTP effettuate dal codice frontend e restituisce invece risposte fittizie.

Una volta che la tua API è pronta, puoi passare facilmente al suo utilizzo modificando solo la configurazione di Mirage.js.

Puoi trovare il codice sorgente di questo progetto in questo GitHub deposito.

Crea un server API fittizio con Mirage.js

Per dimostrare come configurare le API fittizie, creerai una semplice app React da fare che utilizza un backend Mirage.js. Ma prima, creare un'applicazione React utilizzando il comando create-react-app. In alternativa è possibile utilizzare Vite per impostare un progetto React. Successivamente, installa la dipendenza Mirage.js.

npm install --save-dev miragejs

Ora, per creare un'istanza del server Mirage.js per intercettare richieste e simulare risposte API, utilizza il file creareServer metodo. Questo metodo accetta un oggetto di configurazione come parametro.

Questo oggetto include il ambiente E spazio dei nomi per l'API. L'ambiente specifica la fase di sviluppo in cui si trova l'API, ad esempio lo sviluppo, mentre lo spazio dei nomi è il prefisso aggiunto a tutti gli endpoint API.

Creane uno nuovo src/server.js file e includere il seguente codice:

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

Se necessario, puoi personalizzare lo spazio dei nomi in modo che corrisponda alla struttura dell'URL della tua API effettiva, specificando anche la versione. In questo modo, una volta che la tua API è pronta, puoi integrarla facilmente nella tua applicazione front-end con modifiche minime al codice.

Inoltre, all'interno della configurazione dell'istanza del server, puoi anche definire un modello di dati per simulare l'archiviazione e il recupero dei dati nell'ambiente simulato.

Infine, avvia il server Mirage.js importando l'oggetto server nel tuo file indice.jsx O main.jsx archiviare come segue:

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

Aggiungi dati seed all'API fittizia

Mirage.js dispone di un database in memoria che puoi utilizzare per prepopolare l'API fittizia con i dati seed iniziali e per gestire i dati di test dall'applicazione client. Ciò significa che puoi archiviare e recuperare i dati di test dal database fittizio e utilizzarli nella tua applicazione client.

Per aggiungere dati seed all'API Mock, aggiungi il seguente codice nel file server.js file proprio sotto il file Modelli oggetto.

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

IL semi La funzione popola un server Mirage.js con tre elementi da fare, ciascuno con un titolo e una descrizione. Facoltativamente, invece di codificare i dati di test, è possibile integrare una libreria come Faker.js per generare i dati di test richiesti.

Definire i percorsi API simulati

Ora definisci alcuni percorsi API per l'API fittizia. In questo caso, specifica i percorsi per gestire le richieste API fittizie GET, POST e DELETE.

Proprio sotto i dati seed, aggiungi il codice seguente:

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

Costruisci un client React

Ora che l'API fittizia è configurata, creiamo un client React per interagire e utilizzare gli endpoint API. Sei libero di utilizzare qualsiasi libreria di componenti dell'interfaccia utente che preferisci, ma questa guida utilizzerà l'interfaccia utente di Chakra per definire lo stile dell'app.

Innanzitutto, installa queste dipendenze:

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

Quindi, creane uno nuovo src/components/TodoList.jsx file e includere il seguente codice:

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

Ora, definisci un componente funzionale per eseguire il rendering dell'interfaccia utente dell'elenco di cose da fare, inclusi i campi di input per l'aggiunta di nuove attività e un elenco di attività esistenti.

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

Ora definisci le funzioni del gestore per le operazioni di aggiunta ed eliminazione. Ma prima aggiungi questi stati. In alternativa, puoi utilizzare l'hook useReducer per definire la logica di gestione dello stato per l'app dell'elenco delle cose da fare.

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

Ora, definisci la logica per recuperare e visualizzare i dati seed nel database in memoria quando l'applicazione viene caricata per la prima volta nel browser avvolgendo il file andare a prendere metodo in a useEffect gancio.

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

IL renderKey state è incluso anche in useEffect per garantire che il codice attivi un nuovo rendering dei dati appena aggiunti nel database in memoria quando il server è in esecuzione.

In poche parole, ogni volta che un utente aggiunge nuovi dati di cose da fare al database Mirage.js, il componente eseguirà nuovamente il rendering per visualizzare i dati aggiornati.

Aggiunta di dati all'API

Ora definisci la logica per l'aggiunta di dati all'API tramite richieste POST. Proprio sotto l'hook useEffect, includi il seguente codice.

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

Quando un utente inserisce i dati nel campo di input delle cose da fare e fa clic su Aggiungi cose da fare pulsante, il codice aggiorna il file nuovoTodo stato con l'input dell'utente. Quindi, invia una richiesta POST fittizia all'API con il nuovo oggetto dati nel corpo della richiesta per salvarlo nel database in memoria.

Se la richiesta POST ha esito positivo, il codice aggiunge il nuovo elemento al file tutto array e, infine, attiva il nuovo rendering del componente per mostrare il nuovo elemento da fare.

Richieste API DELETE fittizie

Ora, definisci la logica per l'eliminazione dei dati tramite richieste API fittizie DELETE. Questo processo prevede l'invio di una richiesta DELETE per rimuovere l'elemento da fare dal database in memoria. In caso di successo, aggiorna entrambi i file tutto E caricamento stato per riflettere il processo di eliminazione.

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

Tieni presente che questo processo può eliminare solo i dati appena aggiunti, non i dati seed.

Infine, importa il file Lista di cose da fare componente in App.jsx file per visualizzarlo nel DOM.

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

Grande! Una volta avviato il server di sviluppo, puoi recuperare i dati seed e aggiungere ed eliminare nuovi dati dall'API fittizia nella tua app React.

Utilizzo di API fittizie per accelerare lo sviluppo

La simulazione delle API è un ottimo modo per accelerare lo sviluppo del frontend, sia che tu stia lavorando su un progetto individualmente o come parte di un team. Utilizzando le API Mock, puoi creare rapidamente l'interfaccia utente e testare il codice senza attendere il completamento del backend.