How to use ra-data-json-server - 5 common examples

import jsonServerProvider from 'ra-data-json-server'
import httpClient from './httpClient'
import { REST_URL } from '../consts'

const dataProvider = jsonServerProvider(REST_URL, httpClient)

const mapResource = (resource, params) => {
  switch (resource) {
    case 'albumSong':
      return ['song', params]

    case 'playlistTrack':
      // /api/playlistTrack?playlist_id=123  => /api/playlist/123/tracks
      let plsId = '0'
      if (params.filter) {
        plsId = params.filter.playlist_id
      }
      return [`playlist/${plsId}/tracks`, params]

    default:
      return [resource, params]

import React from 'react';
import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import PostIcon from '@material-ui/icons/Book';
import TodoIcon from '@material-ui/icons/ViewList';
import UserIcon from '@material-ui/icons/Group';
import { createMuiTheme } from '@material-ui/core/styles';

import { UserList, UserShow } from './users';
import { TodoList, TodoShow, TodoEdit, TodoCreate } from './todos';
import { PostList, PostShow, PostEdit, PostCreate } from './posts';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#ff5740',
      main: '#e50914',
      dark: '#aa0000',
      contrastText: '#fff'
    },
    secondary: {
      light: '#ff5740',
      main: '#e50914',
      dark: '#aa0000',
      contrastText: '#fff'
    }
  }
});

import { fetchUtils } from 'ra-core';
import jsonServerProvider from 'ra-data-json-server';
import { stringify } from 'query-string';

export const apiUrl = window.DKRON_API_URL || 'http://localhost:8080/v1'
const dataProvider = jsonServerProvider(apiUrl);

const myDataProvider = {
    ...dataProvider,
    getManyReference: (resource: any, params: any) => {
        const { page, perPage } = params.pagination;
        const { field, order } = params.sort;

        const query = {
            ...fetchUtils.flattenObject(params.filter),
            [params.target]: params.id,
            _sort: field,
            _order: order,
            _start: (page - 1) * perPage,
            _end: page * perPage,
        };
        const url = `${apiUrl}/${params.target}/${params.id}/${resource}?${stringify(query)}`;

const App = () => (
    
        
        
        
    
);
export default App;

import React from 'react';
import PostIcon from '@material-ui/icons/Book';
import UserIcon from '@material-ui/icons/Group';
import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import Dashboard from './Dashboard';
import { PostList, PostEdit, PostCreate } from './Posts';
import { UserList } from './Users';

const dataProvider = jsonServerProvider("https://api-ten-minutes.lotteryjs.com");
const Title = () =&gt; (<div>Golang ❤️ MongoDB ❤️ React</div>)

const App = () =&gt; (
  } dashboard={Dashboard} dataProvider={dataProvider}&gt;
      
      
  
)

export default App;