Comment créer et utiliser des API simulées dans les applications React à l'aide de Mirage.js

Lors du développement d’applications full-stack, une part importante du travail front-end repose sur les données en temps réel du back-end.

Cela peut signifier que vous devez attendre le développement de l'interface utilisateur jusqu'à ce que l'API soit disponible. Cependant, attendre que l'API soit prête pour configurer le frontend peut réduire considérablement la productivité et prolonger les délais du projet.

Une excellente solution à ce problème consiste à utiliser des API fictives. Ces API vous permettent de développer et testez votre frontend en utilisant des données qui imitent la structure des données réelles, le tout sans vous fier aux données réelles. API.

Premiers pas avec les API simulées de Mirage.js

Mirage.js est une bibliothèque JavaScript qui vous permet de créer des API fictives, complétées par un serveur de test exécuté du côté client de votre application Web. Cela signifie que vous pouvez tester votre code frontend sans avoir à vous soucier de la disponibilité ou du comportement de votre véritable API backend.

Pour utiliser Mirage.js, vous devez d'abord créer des points de terminaison d'API fictifs et définir les réponses qu'ils doivent renvoyer. Ensuite, Mirage.js intercepte toutes les requêtes HTTP effectuées par votre code frontend et renvoie les réponses fictives à la place.

Une fois votre API prête, vous pouvez facilement passer à son utilisation en modifiant uniquement la configuration de Mirage.js.

Vous pouvez trouver le code source de ce projet dans ce GitHub dépôt.

Créer un serveur API simulé avec Mirage.js

Pour montrer comment configurer des API fictives, vous allez créer une application React simple qui utilise un backend Mirage.js. Mais d'abord, créer une application React à l'aide de la commande create-react-app. Alternativement, vous pouvez utiliser Vite pour monter un projet React. Ensuite, installez la dépendance Mirage.js.

npm install --save-dev miragejs

Maintenant, pour créer une instance de serveur Mirage.js afin d'intercepter les requêtes et de simuler les réponses de l'API, utilisez le créer un serveur méthode. Cette méthode prend un objet de configuration comme paramètre.

Cet objet comprend le environnement et espace de noms pour l'API. L'environnement spécifie le stade de développement auquel se trouve l'API, tel que le développement, tandis que l'espace de noms est le préfixe ajouté à tous les points de terminaison de l'API.

Créer un nouveau src/serveur.js fichier et incluez le code suivant :

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

Si nécessaire, vous pouvez personnaliser l'espace de noms pour qu'il corresponde à la structure d'URL de votre API actuelle, notamment en spécifiant la version. De cette façon, une fois votre API prête, vous pouvez facilement l'intégrer dans votre application front-end avec un minimum de modifications de code.

De plus, dans la configuration de l'instance de serveur, vous pouvez également définir un modèle de données pour simuler le stockage et la récupération de données dans l'environnement fictif.

Enfin, démarrez le serveur Mirage.js en important l'objet serveur dans votre index.jsx ou main.jsx déposer comme suit :

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

Ajouter des données de départ à l'API Mock

Mirage.js dispose d'une base de données en mémoire que vous pouvez utiliser pour préremplir l'API fictive avec les données de départ initiales et pour gérer les données de test de votre application client. Cela signifie que vous pouvez stocker et récupérer les données de test de la base de données fictive et les utiliser dans votre application client.

Pour ajouter des données de départ à l'API Mock, ajoutez le code suivant dans le fichier serveur.js fichier juste en dessous du des modèles objet.

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

Le graines La fonction remplit un serveur Mirage.js avec trois éléments de tâche, chacun avec un titre et une description. En option, au lieu de coder en dur les données de test, vous pouvez intégrer une bibliothèque telle que Faker.js pour générer les données de test requises.

Définir les routes de l'API simulée

Maintenant, définissez quelques routes API pour l'API fictive. Dans ce cas, spécifiez les itinéraires pour gérer les requêtes API fictives GET, POST et DELETE.

Juste en dessous des données de départ, ajoutez le code ci-dessous :

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

Créer un client React

Maintenant que l'API fictive est configurée, créons un client React pour interagir avec et consommer les points de terminaison de l'API. Vous êtes libre d'utiliser n'importe quelle bibliothèque de composants d'interface utilisateur de votre choix, mais ce guide utilisera Chakra UI pour styliser l'application.

Tout d'abord, installez ces dépendances :

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

Ensuite, créez un nouveau src/components/TodoList.jsx fichier et incluez le code suivant :

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

Maintenant, définissez un composant fonctionnel pour afficher l'interface utilisateur de la liste de tâches, y compris les champs de saisie permettant d'ajouter de nouvelles tâches et une liste de tâches existantes.

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

Maintenant, définissez les fonctions de gestionnaire pour les opérations d'ajout et de suppression. Mais d’abord, ajoutez ces états. Alternativement, vous pouvez utilisez le hook useReducer pour définir la logique de gestion de l'état pour l'application de liste de tâches.

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

Maintenant, définissez la logique pour récupérer et afficher les données de départ dans la base de données en mémoire lors du premier chargement de l'application dans le navigateur en encapsulant le aller chercher méthode dans un utiliserEffet crochet.

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

Le clé de rendu L'état est également inclus dans useEffect pour garantir que le code déclenche un nouveau rendu des données nouvellement ajoutées dans la base de données en mémoire lorsque le serveur est en cours d'exécution.

En termes simples, chaque fois qu'un utilisateur ajoute de nouvelles données de tâches à la base de données Mirage.js, le composant sera restitué pour afficher les données mises à jour.

Ajout de données à l'API

Maintenant, définissez la logique d'ajout de données à l'API via des requêtes POST. Juste en dessous du hook useEffect, incluez le code suivant.

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

Lorsqu'un utilisateur saisit des données dans le champ de saisie de la tâche et clique sur le bouton Ajouter une tâche bouton, le code met à jour le nouveauTodo état avec l’entrée de l’utilisateur. Ensuite, il envoie une requête POST fictive à l'API avec le nouvel objet de données dans le corps de la requête pour l'enregistrer dans la base de données en mémoire.

Si la requête POST réussit, le code ajoute le nouvel élément au toutes les choses tableau, et enfin, déclenche le nouveau rendu du composant pour afficher le nouvel élément de tâche.

Requêtes de suppression d'API simulées

Maintenant, définissez la logique de suppression des données via les requêtes API simulées DELETE. Ce processus implique l'envoi d'une requête DELETE pour supprimer l'élément de tâche de la base de données en mémoire. En cas de succès, mettez à jour à la fois le toutes les choses et chargement état pour refléter le processus de suppression.

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

Gardez à l’esprit que ce processus ne peut supprimer que les données nouvellement ajoutées, pas les données de départ.

Enfin, importez le Liste de choses à faire composant dans le App.jsx fichier pour le restituer dans le DOM.

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

Super! Une fois que vous démarrez le serveur de développement, vous pouvez récupérer les données de départ, ainsi qu'ajouter et supprimer de nouvelles données de l'API fictive dans votre application React.

Utiliser des API simulées pour accélérer le développement

Les API moqueuses sont un excellent moyen d'accélérer le développement frontend, que vous travailliez sur un projet individuellement ou en équipe. En utilisant les API Mock, vous pouvez rapidement créer l'interface utilisateur et tester leur code sans attendre que le backend soit terminé.