임베드 리소스를 사용하여 DRY하는 방법

Question

현재 ReactJS 앱에서 사용하는 REST API를 설계 중입니다. 두 개의 실제 엔드 포인트는 다음과 같습니다 :

/species 
    id 
    types 
     [name, name] // each specy has 2 types, contained in an array 

/types 
    name 

우리는 우리가 모든 type 자원의 목록을 제공하는 엔드 포인트를 볼 수 있으며, species 엔드 포인트가 특정 specy의 type 제공합니다. 내 ReactJS 응용 프로그램에서

, 나는합니다 (/types 엔드 포인트를 통해 가져온) types의 목록을 포함하는 선택 필드 및 /species의 모든 species 인출의 목록을해야 할 것입니다. 사용자는 Select 필드에서 유형을 선택하여 종을 필터링 할 수 있습니다.

types의 목록을 Select 구성 요소에 보관하고 species의 목록을 Specy 구성 요소의 구성에 포함시키는 것은 여전히 ​​위험합니까? 또는 specy에 자체 엔드 포인트에서 가져온 types을 삽입하는 방법을 찾아야합니까?

Answer 1

엔드 포인트가 /species 인 경우 모든 유형 목록을 작성하면 유형이 0 인 유형이있는 경우를 처리 할 방법이 없습니다. 이것은 문제 일 수도 있고 아닐 수도 있습니다. 또한 모든 생물 종을 항상로드하여 유형의 전체 목록을 가져와야합니다. 이것은 낭비되는 많은 대역폭 일 수 있습니다.

엔드 포인트 /types는 당신이 처음에 드롭 다운을 채우기 위해 필요한 모든 것입니다 가능한 모든 유형의 목록을 제공합니다

---

대신, 다음과 같은 방법을 고려한다. 이제 사용자가 특정 유형을 선택하면 {typeName} 유형에 할당 된 모든 종의 목록을 제공하는 /types/{typeName}/species 종점을 호출합니다. 다시 말하지만, 사용자는보고자하는 데이터 청크 만로드합니다.

이 방법을 사용하면 애플리케이션이 목적을 달성하기 전에 프런트 엔드에서 데이터를 집계하고 전체 데이터 세트를 다운로드하지 않아도됩니다.

---

사이드 노트 : 단 하나의 종 is also species. :-)