Jak budować i wykorzystywać próbne interfejsy API w aplikacjach React przy użyciu Mirage.js

Podczas tworzenia aplikacji typu full-stack znaczna część pracy frontendu opiera się na danych w czasie rzeczywistym z backendu.

Może to oznaczać, że należy wstrzymać się z tworzeniem interfejsu użytkownika do czasu udostępnienia interfejsu API. Jednak oczekiwanie, aż API będzie gotowe do skonfigurowania frontendu, może znacznie zmniejszyć produktywność i wydłużyć czas trwania projektu.

Świetnym obejściem tego problemu jest wykorzystanie próbnych interfejsów API. Te interfejsy API umożliwiają tworzenie i przetestuj swój interfejs, korzystając z danych naśladujących strukturę rzeczywistych danych, a wszystko to bez polegania na rzeczywistości API.

Pierwsze kroki z próbnymi interfejsami API Mirage.js

Mirage.js to biblioteka JavaScript, która umożliwia tworzenie próbnych interfejsów API wraz z serwerem testowym działającym po stronie klienta aplikacji internetowej. Oznacza to, że możesz testować swój kod frontendowy bez martwienia się o dostępność lub zachowanie prawdziwego API backendu.

Aby używać Mirage.js, musisz najpierw utworzyć fałszywe punkty końcowe API i zdefiniować odpowiedzi, które powinny zwracać. Następnie Mirage.js przechwytuje wszystkie żądania HTTP wysyłane przez kod frontendu i zamiast tego zwraca próbne odpowiedzi.

Gdy interfejs API będzie gotowy, możesz łatwo przejść do jego używania, zmieniając jedynie konfigurację Mirage.js.

Kod źródłowy tego projektu znajdziesz w this GitHub magazyn.

Utwórz próbny serwer API za pomocą Mirage.js

Aby zademonstrować, jak skonfigurować próbne interfejsy API, zbudujesz prostą aplikację React, która korzysta z backendu Mirage.js. Ale najpierw, utwórz aplikację React za pomocą polecenia create-react-app. Alternatywnie możesz użyć Zaproś do założenia projektu React. Następnie zainstaluj zależność Mirage.js.

npm install --save-dev miragejs

Teraz, aby utworzyć instancję serwera Mirage.js w celu przechwytywania żądań i próbnych odpowiedzi API, użyj metody utwórz serwer metoda. Ta metoda przyjmuje obiekt konfiguracyjny jako parametr.

Obiekt ten obejmuje środowisko I przestrzeń nazw dla API. Środowisko określa etap rozwoju, na którym znajduje się interfejs API, np. rozwój, podczas gdy przestrzeń nazw to prefiks dodawany do wszystkich punktów końcowych interfejsu API.

Stwórz nowy src/server.js plik i dołącz następujący 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;
}

W razie potrzeby możesz dostosować przestrzeń nazw, aby pasowała do struktury adresu URL rzeczywistego interfejsu API, łącznie z określeniem wersji. W ten sposób, gdy Twój interfejs API będzie gotowy, możesz łatwo zintegrować go z aplikacją front-end przy minimalnych zmianach w kodzie.

Dodatkowo w konfiguracji instancji serwera można także zdefiniować model danych do symulacji przechowywania i odtwarzania danych w środowisku próbnym.

Na koniec uruchom serwer Mirage.js, importując obiekt serwera do pliku indeks.jsx Lub główny.jsx plik w następujący sposób:

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

Dodaj dane początkowe do próbnego interfejsu API

Mirage.js zawiera bazę danych w pamięci, której można użyć do wstępnego wypełnienia próbnego interfejsu API początkowymi danymi początkowymi oraz do zarządzania danymi testowymi z aplikacji klienckiej. Oznacza to, że możesz przechowywać i pobierać dane testowe z próbnej bazy danych i używać ich w aplikacji klienckiej.

Aby dodać dane początkowe do Mock API, dodaj następujący kod w pliku serwer.js plik tuż pod plikiem modele obiekt.

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

The posiew Funkcja zapełnia serwer Mirage.js trzema elementami do wykonania, każdy z tytułem i opisem. Opcjonalnie, zamiast kodować na stałe dane testowe, możesz zintegrować bibliotekę np Faker.js w celu wygenerowania wymaganych danych testowych.

Zdefiniuj próbne trasy API

Teraz zdefiniuj niektóre trasy API dla próbnego interfejsu API. W takim przypadku określ trasy do obsługi próbnych żądań API GET, POST i DELETE.

Tuż pod danymi początkowymi dodaj poniższy kod:

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

Zbuduj klienta Reagującego

Teraz, gdy próbny interfejs API jest skonfigurowany, zbudujmy klienta React do interakcji i korzystania z punktów końcowych interfejsu API. Możesz używać dowolnej biblioteki komponentów interfejsu użytkownika, ale w tym przewodniku do stylizacji aplikacji będzie używany interfejs Chakra.

Najpierw zainstaluj te zależności:

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

Następnie utwórz nowy src/components/TodoList.jsx plik i dołącz następujący kod:

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

Teraz zdefiniuj komponent funkcjonalny, który będzie renderował interfejs użytkownika listy zadań do wykonania, łącznie z polami wejściowymi umożliwiającymi dodawanie nowych zadań i listą istniejących zadań.

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

Teraz zdefiniuj funkcje obsługi dla operacji dodawania i usuwania. Ale najpierw dodaj te stany. Alternatywnie, możesz użyj haka useReducer, aby zdefiniować logikę zarządzania stanem dla aplikacji z listą rzeczy do zrobienia.

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

Teraz zdefiniuj logikę pobierania i wyświetlania danych początkowych w bazie danych w pamięci, gdy aplikacja ładuje się po raz pierwszy w przeglądarce, zawijając aportować metoda w A użyjEfektu hak.

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

The renderKey stan jest również zawarty w useEffect, aby zapewnić, że kod uruchomi ponowne renderowanie nowo dodanych danych w bazie danych w pamięci, gdy serwer będzie uruchomiony.

Mówiąc najprościej, za każdym razem, gdy użytkownik doda nowe dane zadań do bazy danych Mirage.js, komponent zostanie ponownie wyrenderowany, aby wyświetlić zaktualizowane dane.

Dodawanie danych do API

Teraz zdefiniuj logikę dodawania danych do API poprzez żądania POST. Tuż pod hakiem useEffect umieść następujący kod.

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

Gdy użytkownik wprowadzi dane w polu wprowadzania danych do wykonania i kliknie przycisk Dodaj zadanie przycisk, kod aktualizuje plik nowośćDo zrobienia stan za pomocą danych wejściowych użytkownika. Następnie wysyła fałszywe żądanie POST do interfejsu API z nowym obiektem danych w treści żądania, aby zapisać go w bazie danych w pamięci.

Jeśli żądanie POST zakończy się pomyślnie, kod dodaje nowy element do pliku rzeczy do zrobienia array i na koniec uruchamia ponowne renderowanie komponentu, aby pokazać nowy element do wykonania.

Próbne żądania USUŃ API

Teraz zdefiniuj logikę usuwania danych za pomocą próbnych żądań API DELETE. Proces ten polega na wysłaniu żądania DELETE w celu usunięcia elementu zadania z bazy danych znajdującej się w pamięci. Jeśli się powiedzie, zaktualizuj oba pliki rzeczy do zrobienia I Ładowanie stan odzwierciedlający proces usuwania.

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

Należy pamiętać, że ten proces może usunąć tylko nowo dodane dane, a nie dane początkowe.

Na koniec zaimportuj plik Lista rzeczy do zrobienia składnik w Aplikacja.jsx plik, aby wyrenderować go w DOM.

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

Świetnie! Po uruchomieniu serwera programistycznego możesz pobrać dane początkowe oraz dodawać i usuwać nowe dane z próbnego interfejsu API w aplikacji React.

Korzystanie z próbnych interfejsów API w celu przyspieszenia programowania

Mocking API to świetny sposób na przyspieszenie rozwoju frontendu, niezależnie od tego, czy pracujesz nad projektem indywidualnie, czy w zespole. Korzystając z Mock API, możesz szybko zbudować interfejs użytkownika i przetestować jego kod, nie czekając na ukończenie backendu.