Skip to main content

​
Display rows from JSON

method: GET 
blocks:
  - type: http
    method: GET
    fetchFn: |
      return [
        { name: 'hey' },
        { name: 'good day' },
      ]

​
Display rows from Fetch API

Fetch API로 데이터를 가져와 테이블로 렌더링합니다. 
blocks:
  - type: http
    method: GET
    fetchFn: |
      const r = await fetch('https://api.selectfromuser.com/sample-api/wines?page=1&limit=10')

      const data = await r.json()

      return data.rows

​
Display rows from Axios API

Axios 방식으로 API를 호출할 수 있습니다. 
blocks:
  - type: http
    method: GET
    fetchFn: |
      const r = await axios.get(`https://api.selectfromuser.com/sample-api/wines?page=1&limit=10`)
      
      const rows = r.data.rows
      
      return rows
    paginationOptions:
      enabled: true
      perPage: 3

​
Filter by input parameter

params.key 입력 필드를 만들어 필터 조회할 수 있습니다. 
blocks:
  - type: http
    method: GET
    fetchFn: |
      const q = name || 'all'
      return [
        { id: 1, keyword: q, result: 'mock-1' },
        { id: 2, keyword: q, result: 'mock-2' }
      ]
    params:
      - key: name
        placeholder: 검색어 입력

​
Error handling

JavaScript로 에러를 다룰 수 있습니다. 
blocks:
  - type: http
    method: GET
    fetchFn: |
      if (!q) {
        return { error: '검색어 없음' }
      }
      return [{ id: 1, q, value: 'ok' }]
    params:
      - key: q
        placeholder: 검색어

​
Post data from input parameter

method: POST 입력 값으로 POST API를 호출할 수 있습니다. 
blocks:
  - type: http
    method: POST
    fetchFn: |
      if (!text) {
        return { error: 'text is required' }
      }
      return {
        message: 'Post created',
        text
      }
    params:
      - key: text
        label: 텍스트 입력
        format: textarea