[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

원격 읽기 및 어댑터

원격 테이블은 read 구성을 통해 데이터를 가져옵니다.

read 옵션은 다음을 정의합니다.

  • 데이터를 요청할 위치

  • 요청을 전송하는 방법

  • 응답 구조를 해석하는 방법

기본적으로 응답은 표준 JSON 배열로 처리됩니다.

응답이 구조화된 프로토콜을 따르는 경우 어댑터를 지정할 수 있습니다.

기본 HTTP 읽기(기본 동작)

어댑터를 지정하지 않으면 응답은 레코드 배열로 처리됩니다.

예제:

const products = dataManager.addTable("products", {
    remote: {
        read: {
            url: "https://example.com/api/products",
            method: "GET"
        }
    }
});

products.fetch();

예상 응답 형식:

[
  { "ProductId": 1, "ProductName": "ItemA", "UnitPrice": 15 },
  { "ProductId": 2, "ProductName": "ItemB", "UnitPrice": 17 }
]

응답이 이미 배열인 경우 어댑터는 필요하지 않습니다.

REST 어댑터

일부 REST API는 래핑된 구조를 반환합니다.

예상 응답:

{
  "status": "success",
  "data": [
    { "id": 1, "name": "Item A" },
    { "id": 2, "name": "Item B" }
  ]
}

data 필드를 추출하려면 rest 어댑터를 사용합니다.

const products = dataManager.addTable("products", {
    remote: {
        read: {
            url: "https://example.com/api/products",
            adapter: "rest"
        }
    }
});

REST 어댑터 사용 시:

  • data 속성은 레코드 컬렉션으로 처리됩니다.

  • 다른 래퍼 속성은 무시됩니다.

OData 어댑터

OData 응답은 레코드를 value 속성에 저장합니다.

예상 응답:

{
  "@odata.context": "...",
  "value": [
    { "ProductId": 1, "ProductName": "ItemA" }
  ]
}

사용 예:

const products = dataManager.addTable("products", {
    remote: {
        read: {
            url: "https://example.com/api/products",
            adapter: "odata"
        }
    }
});

어댑터는 value 배열을 자동으로 추출합니다.

OData v4 어댑터

OData v4는 동일한 value 구조를 따르지만 추가 메타데이터를 포함할 수 있습니다.

const products = dataManager.addTable("products", {
    remote: {
        read: {
            url: "https://example.com/api/products",
            adapter: "odata4"
        }
    }
});

odata4 어댑터는 v4 전용 메타데이터를 자동으로 처리합니다.

GraphQL 어댑터

GraphQL 응답은 레코드를 중첩된 data 객체 내부에 래핑합니다.

예상 응답:

{
  "data": {
    "users": {
      "data": [
        { "id": "1", "name": "Leanne Graham" }
      ]
    }
  }
}

구성 예:

const users = dataManager.addTable("users", {
    remote: {
        read: {
            url: "https://graphqlzero.almansi.me/api",
            adapter: "graphql",
            method: "POST",
            body: {
                query: `
                    query {
                        users {
                            data {
                                id
                                name
                                email
                            }
                        }
                    }
                `
            }
        }
    },
    schema: {
        dataPath: "users.data"
    }
});

중요 사항:

  • GraphQL은 일반적으로 POST를 사용합니다.

  • query를 반드시 제공해야 합니다.

  • schema.dataPath는 레코드 배열이 위치한 경로를 지정합니다.

스키마에 대한 자세한 내용은 스키마 섹션에 설명되어 있습니다.

요청 옵션 사용

options 속성은 표준 fetch 구성에 대응합니다.

예제:

read: {
    url: "https://example.com/api/products",
    method: "POST",
    options: {
        headers: {
            "Content-Type": "application/json"
        }
    }
}

이를 통해 다음을 설정할 수 있습니다.

  • 사용자 지정 헤더

  • 자격 증명(credentials)

  • mode 구성

  • 기타 fetch 설정

body 사용

body 속성은 요청 본문을 지정하는 간단한 방법입니다.

예제:

read: {
    url: "https://graphqlzero.almansi.me/api",
    adapter: "graphql",
    method: "POST",
    body: {
        query: "{ users { data { id name } } }"
    }
}

body와 options.body를 모두 제공하는 경우:

  • body가 우선 적용됩니다.

  • 작업별 body가 이를 재정의할 수 있습니다.

사용자 지정 읽기 처리기

URL 구성을 제공하는 대신 함수를 정의할 수 있습니다.

const products = dataManager.addTable("products", {
    remote: {
        read: function () {
            return Promise.resolve([
                { ProductId: 1, ProductName: "Chai" }
            ]);
        }
    }
});

이를 통해 다음이 가능합니다.

  • 데이터 가져오기 전체 제어

  • 사용자 지정 전송 계층과 통합

  • Mock 구현

참고:

함수 기반 처리기는 내보내기 시 직렬화할 수 없습니다.