React-Admin - backend와 연동

React-Admin과 backend를 연동해봅시다.

작성자

홍세민

홍세민

MarcusHong

Real server

Tutorial에서는 fake Server를 dataProvider로 사용했다. 이번에는 backend와 연동하는 것을 목표로 한다.

dataProvier

App.js에서 custom한 dataProvider를 선언해서 사용한다.

// App.js
import _dataProvider from './providers/data'
import projects from './components/projects'

const dataProvider = _dataProvider('/api')

const App = () => <Admin
  dataProvider={dataProvider}>
  <Resource name='projects' {...projects} />
</Admin>

fetchUtils

react-admin에는 ajax라이브러리인 fetchUtils가 있다. 이것을 활용해서 costom dataProvider를 만든다. 여기서는 jwt 토큰을 사용한 인증기능을 추가한다.

// providers/data/index.js
import {fetchUtils} from 'react-admin'

const models = {
  projects: require('./projects'),
}

export default function (apiUrl) {
  const httpClient = (url, options = {}) => {
    if (!options.headers) {
      options.headers = new Headers({Accept: 'application/json'})
    }
    const token = localStorage.getItem('token')
    options.headers.set('Authorization', `Bearer ${token}`)
    return fetchUtils.fetchJson(url, options)
  }

  return function (type, resource, params) {
    const resourceModel = models[resource]
    const {url, options} = resourceModel.request(apiUrl, type, params)
    return httpClient(url, options).then(response => resourceModel.response(response, type, params))
  }
}

API 연동

react-admin에서 create, get, delete등 api 메서드와 페이지를 연계시켜 주지만 매번 이렇게 하기는 쉽지 않다. 각각에 메세드마다의 request와 response를 매핑한다. 주의할 점은 조회 페이지에서 id는 필수 값이다. 또한 조회 리스트에서 total 역시 필수 값이다.

// providers/data/projects.js
import {
  CREATE,
  GET_LIST,
  GET_ONE,
  UPDATE,
} from 'react-admin'

export function request(apiUrl, type, params) {
  let url = apiUrl + '/projects'
  let options = {}

  switch (type) {
    case CREATE:
      options.method = 'POST'
      options.body = JSON.stringify(params.data)
      break
    case UPDATE:
      url += `/${params.id}`
      options.method = 'PUT'
      options.body = JSON.stringify(params.data)
      break
    case GET_ONE:
      url += `/${params.id}`
      break
    default:
      break
  }
  return {
    url: url,
    options
  }
}

export function response(res, type, params) {
  let ret = {}
  const {headers, json} = res

  switch (type) {
    case CREATE:
    case GET_ONE:
      json.id = json.sid
      ret = {data: json}
      break
    case UPDATE:
      ret = params
      break
    case GET_LIST:
      json.forEach(row => {
        row.id = row.sid
      })
      ret = {data: json, total: json.length}
      break
    default:
      if (json) ret = {data: json}
      break
  }
  return ret
}

정리

rest api 서버를 커스터마이즈 하면서 ajax request 취소 기능을 추가하고 싶다면 axios로도 dataProvider를 만들 수 있다. id와 total을 자유도가 높기 때문에 취향대로 선택하면 된다.

Tags : react_admin 

comments powered by Disqus