Mirage For Beginners
0 likes300 views
This document introduces Mirage, an API mocking library that allows front-end developers to simulate API responses before the backend is ready. It provides code examples for setting up a Mirage server, creating routes, and handling requests with mock data in an in-memory database. Additionally, it outlines project folder structure and configuration settings for efficient use and organization of mock API routes.
![API Function Example
// The fake function
function fetchProducts() {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{ id: 1, name: 'Orange' },
{ id: 2, name: 'Banana' },
]);
}, 400);
});
}
// The actual function
function fetchProducts() {
return fetch('/api/products');
}
Must be changed to look like the right
one after the API is completed
9](https://image.slidesharecdn.com/mirageforbeginners-210303035043/85/Mirage-For-Beginners-9-320.jpg)
![Create Mirage Server
import { createServer } from 'miragejs';
createServer({
routes() {
this.timing = 400; // The Server's response time in milliseconds
this.get('/api/products', () => {
return {
data: [{ id: 1, name: 'Orange' }, { id: 2, name: 'Banana' }],
};
});
},
});
18](https://image.slidesharecdn.com/mirageforbeginners-210303035043/85/Mirage-For-Beginners-18-320.jpg)
![Create Initial Data
20
createServer({
models: { product: Model },
seeds(server) {
server.create(
'product',
{ id: 1, name: 'Orange' },
);
},
});
createServer({
models: { product: Model },
seeds(server) {
server.db.loadData({
products: [
{ id: 1, name: 'Orange' },
],
});
},
});](https://image.slidesharecdn.com/mirageforbeginners-210303035043/85/Mirage-For-Beginners-20-320.jpg)
![/mock/settings.dev.js
export default {
delay: 400,
routes: [
'product/list', //=> /mock/routes/product/list.route.js
'product/detail', //=> /mock/routes/product/detail.route.js
],
};
24](https://image.slidesharecdn.com/mirageforbeginners-210303035043/85/Mirage-For-Beginners-24-320.jpg)
![/mock/server.js (1)
const context = require.context('./routes', true, /.route.js$/);
const routes = context
.keys()
.map(filepath => {
const name = filepath.match(/./([w/-]+).route.js/)[1];
const route = context(filepath).default;
return { name, route };
})
.filter(({ name }) => settings.routes.includes(name));
25](https://image.slidesharecdn.com/mirageforbeginners-210303035043/85/Mirage-For-Beginners-25-320.jpg)
Mirage For Beginners
- 1. Mirage For Beginners Mirage Version 0.1.41 Wilson Su
- 3. Background 3
- 4. Given a web app that accesses data in the server through RESTful APIs 4
- 5. API Request and Response HTTP Request GET/POST/PUT/DELETE ... HTTP Response JSON Data Client Server Web App API Controller Data 5
- 6. Front-end developers want to implement web UIs before the APIs are ready 6
- 7. Develop New Features Client Server Web App API Controller Data GET /api/products 404 Not Found 7
- 8. What’s The Next Step Wait for the backend side to complete the API development A Do the API development yourself B Add mock data to the API request functions in the client side C Add mock data to the API request functions in the client side C 8
- 9. API Function Example // The fake function function fetchProducts() { return new Promise((resolve) => { setTimeout(() => { resolve([ { id: 1, name: 'Orange' }, { id: 2, name: 'Banana' }, ]); }, 400); }); } // The actual function function fetchProducts() { return fetch('/api/products'); } Must be changed to look like the right one after the API is completed 9
- 10. You can start to use Mirage 10
- 12. What’s Mirage Mirage − is an API mocking library running in the browser − runs alongside the rest of your frontend JavaScript code − uses an in-memory database to maintain the data 12
- 13. How Mirage Works? Mirage intercepts requests by stubbing native fetch and XMLHttpRequest 13
- 14. API Request and Response HTTP Request GET/POST/PUT/DELETE ... HTTP Response JSON Data Client Server Web App API Controller Data fetch XMLHttpRequest 14
- 15. With Mirage Server In The Client Client Mock API Mock Data Fake HTTP Response GET /api/products Web App fetch XMLHttpRequest 15 In-Memory DB
- 16. Override Native XMLHttpRequest const nativeXMLHttpRequest = window.XMLHttpRequest; const makeFakeRequest = () => { function FakeRequest() {} FakeRequest.prototype.send = () => { ... }; FakeRequest.prototype.abort = () => { ... }; ... return FakeRequest; }; window.XMLHttpRequest = makeFakeRequest(); 16
- 17. Code Examples 17
- 18. Create Mirage Server import { createServer } from 'miragejs'; createServer({ routes() { this.timing = 400; // The Server's response time in milliseconds this.get('/api/products', () => { return { data: [{ id: 1, name: 'Orange' }, { id: 2, name: 'Banana' }], }; }); }, }); 18
- 19. Dynamic Handlers import { createServer, Model } from 'miragejs'; createServer({ models: { product: Model }, routes() { this.get('/api/products', schema => schema.products.all()); this.post('/api/products', (schema, request) => { const body = JSON.parse(request.requestBody); return schema.products.create(body); }); }, }); 19
- 20. Create Initial Data 20 createServer({ models: { product: Model }, seeds(server) { server.create( 'product', { id: 1, name: 'Orange' }, ); }, }); createServer({ models: { product: Model }, seeds(server) { server.db.loadData({ products: [ { id: 1, name: 'Orange' }, ], }); }, });
- 21. Dynamic Segments 21 createServer({ models: { product: Model }, routes() { this.get('/api/products/:id', (schema, request) => { return schema.products.find(request.params.id); }); this.delete('/api/products/:id', (schema, request) => { return schema.products.find(request.params.id).destroy(); }); }, });
- 22. More Examples 22
- 23. Project Folder Structure scripts ㄴ app.js mock ㄴ routes ㄴ product ㄴ list.route.js ㄴ detail.route.js ㄴ server.js ㄴ settings.dev.js index.html ✓ Include configurations such as the response time and enabled routes in /mock/settings.dev.js ✓ Put route files under /mock/routes ✓ Add subfolders and route files for different features ✓ No need to update /mock/server.js when new routes added 23
- 24. /mock/settings.dev.js export default { delay: 400, routes: [ 'product/list', //=> /mock/routes/product/list.route.js 'product/detail', //=> /mock/routes/product/detail.route.js ], }; 24
- 25. /mock/server.js (1) const context = require.context('./routes', true, /.route.js$/); const routes = context .keys() .map(filepath => { const name = filepath.match(/./([w/-]+).route.js/)[1]; const route = context(filepath).default; return { name, route }; }) .filter(({ name }) => settings.routes.includes(name)); 25
- 26. /mock/server.js (2) export const makeServer = settings => { createServer({ routes() { this.timing = settings.delay; routes.forEach(({ route }) => route.routes(this)); this.passthrough(); }, }); }; makeServer(settings); 26