# FakeDB

Materialize is built using FakeDB to mock the real life application functionalities.

# Overview

Materialize uses axios-mock-adapter (opens new window) to simulate the server calls.

All of the server calls are located in src/@fake-db.

# Setup

If you're using the starter-kit you'll have to manually setup the fake-db.

  1. First create a folder with name fake-db and create a mock.ts file inside it.

  2. Initialize the axios-mock-adapter in mock.ts file.

    import axios from 'axios'
    import MockAdapter from 'axios-mock-adapter'
    
    const mock = new MockAdapter(axios)
    
    export default mock
    
  3. Create a index.ts file in fake-db folder & add the following:

    import mock from './mock'
    
    mock.onAny().passThrough()
    
  4. To initialize your fake data create a ts file in fake-db folder. Import mock and use it like following:

    import mock from '../mock'
    
    const data = [{...}]
    
    mock.onGet('/url/get-data').reply(config => {
      return [200, data]
    })
    
  5. Import the above created file in fake-db/index.ts:

    import mock from './mock'
    
    import './FILE_WITH_DATA'
    
    mock.onAny().passThrough()
    
  6. Import your fake-db/index.ts in src/pages/_app_.ts to be able to get your data in your app.

  7. Finally, use axios to fetch your data from fake-db

import { useState, useEffect } from 'react'

import axios from 'axios'

const Component = () => {
  const [data, setData] = useState([])

  useEffect(() => {
    axios.get('/url/get-data').then(response => setData(response.data))
  }, [])

  return <h1>Component</h1>
}

WARNING

We have used the fake-db for demo purposes only. fake-db will not work for the real life applications.

Last Updated: 5/8/2024, 7:58:27 AM