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

now go to the terminal and start the react server:

$ npm run start

now you should be able to see your users being rendered in the view. this is a simple tutorial, feel free to comment if anything is wrong.

Blog

Using Mirage JS to create a fake api with React JS

Leandro RR

What is it?

Before start

Install Mirage JS

Creating the server

Fetch the data

Join Our Newsletter. No Spam, Only the good stuff.

Related