Posted on Feb 17, 2020

Using Mirage JS to create a fake api with React JS

welcome to my first post, today i'm going to show you how to use Mirage JS to make a fake endpoint, after you learn it, i'm sure you will be amazed by it and will use it in your future projects.

What is it?

from Mirage website: Mirage JS is an API mocking library that lets you build, test and share a complete working JavaScript application without having to rely on any backend services.

if you want know more, read the getting started guide.

Before start

install the create-react-app to try Mirage.

$ npx create-react-app testapp

Install Mirage JS

$ npm i --save-dev miragejs

Creating the server

cd to the react folder then create a server.js file inside src/ folder:

$ cd testapp/ ; touch src/server.js

now open the server.js file and type the following code:

import { Server, Model } from "miragejs" export function makeServer({ environment = "development" } = {}) { let server = new Server({ environment, models: { user: Model, }, seeds(server) { server.create("user", { name: "Bob" }) server.create("user", { name: "Alice" }) }, routes() { this.namespace = "api" this.get("/users", schema => { return schema.users.all() }) }, }) return server }

now import this script inside your src/index.js:

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import {makeServer} from './server'; if (process.env.NODE_ENV === "development") { makeServer() } ReactDOM.render(<App />, document.getElementById('root')); serviceWorker.unregister();

Fetch the data

now inside our app.js, use the react functions useState and useEffect to help us with this job:

import { useState, useEffect } from "react" export default function App() { let [users, setUsers] = useState([]) useEffect(() => { fetch("/api/users") .then(res => res.json()) .then(json => { setUsers(json.users) }) }, []) return ( <ul data-testid="users"> {users.map(user => ( <li key={user.id} data-testid={`user-${user.id}`}> {user.name} </li>  ))} </ul>  ) }