GraphQL API와 Parse 3.10의 릴레이 호환성 살펴보기

14 분

릴레이 호환성

소개

Parse Server GraphQL API는 현재 사용 가능한 최신 표준을 따르며, 고도로 확장 가능한 API와 야심찬 프론트엔드 프로젝트를 위해 설계되었습니다.

Parse 오픈 소스 팀은 GraphQL 서버 릴레이 사양을 따르기로 선택했습니다.

릴레이는 GraphQL로 구동되는 데이터 중심의 React 애플리케이션을 구축하기 위한 JavaScript 프레임워크로, 사용하기 쉽고 확장 가능하며, 무엇보다도 성능이 뛰어나도록 처음부터 설계되었습니다. 릴레이는 정적 쿼리와 사전 코드 생성을 통해 이를 달성합니다.

Parse 3.10부터 릴레이와의 완전한 호환성이 구현되었습니다. 이 문서는 이러한 구현을 안내합니다.

전제 조건

이 튜토리얼을 시작하려면 다음이 필요합니다:

Back4App에서 생성된 앱
다음 링크를 참조하세요 새 앱 만들기 튜토리얼 Back4App에서 앱을 만드는 방법을 배우기 위해.

1 - 새 Back4App 앱 만들기

우선, Back4App에서 기존 앱이 생성되어 있는지 확인해야 합니다. 그러나 새로운 사용자라면 이 튜토리얼을 확인하여 앱을 만드는 방법을 배울 수 있습니다.

2 - 몇 개의 클래스 만들기

새로 생성된 앱에서 데이터베이스 브라우저로 이동하여 클래스 만들기 버튼을 클릭하세요.

클래스를 사용자 정의로 만들고 이름을 지정하세요. 다음 Relay 예제 스키마, Faction, Ship 및 기타 클래스와 일치하는 속성을 가진 클래스를 생성했습니다. 그러나 이 문서를 따르도록 클래스를 생성할 수 있습니다. 쿼리와 변형을 적절히 변경하세요. 관례상 클래스는 대문자로 시작하고 CamelCase 형식이며 공백 및 기호와 같은 특수 문자를 포함하지 않아야 합니다. 완료되면 클래스 만들기를 클릭하세요.

3 - GraphQL 콘솔

클래스와 속성을 생성한 후, API 콘솔로 가서 GraphQL 콘솔에서 쿼리와 변형을 실행할 수 있습니다.

4 - 쿼리

우리의 첫 번째 쿼리는 objectId를 기반으로 객체를 검색합니다 ( id와 혼동하지 마세요). Parse는 발전하였고 이제 쿼리는 ObjectId, 이전 버전에서 id로 알려졌던 것을 지원하며, 이제는 Global Id, 즉 id를 지원합니다. 이는 Relay의 글로벌 ID를 참조하며 클래스 이름이 암호화되어 포함된 더 긴 형식을 가집니다.

ObjectId: EaT0dDk09v id (즉, 글로벌 id): RmFjdGlvbjpFYVQwZERrMDl2

이제 ObjectId로 객체를 검색하는 첫 번째 쿼리를 만들어 보겠습니다:

1   query RebelsQuery {
2     faction(id:"EaT0dDk09v") {
3       objectId #ObjectId for Parse
4       id #GlobalID for Relay
5       name #n
6     }
7   }

그것은 출력될 것입니다.

1   {
2     "data": {
3       "faction": {
4         "objectId": "EaT0dDk09v",
5         "id": "RmFjdGlvbjpFYVQwZERrMDl2",
6         "name": "Galactic Empire"
7       }
8     }
9   }

이제 Relay의 GlobalId로 변경해 보겠습니다:

1   query RebelsQuery {
2     faction(id:"RmFjdGlvbjpFYVQwZERrMDl2") {
3       objectId #ObjectId for Parse
4       id #GlobalID for Relay
5       name #n
6     }
7   }

그리고 결과가 동일할 것임을 주목하세요:

1   {
2     "data": {
3       "faction": {
4         "objectId": "EaT0dDk09v",
5         "id": "RmFjdGlvbjpFYVQwZERrMDl2",
6         "name": "Galactic Empire"
7       }
8     }
9   }

이것은 Global Id가 작동하기 때문에 발생합니다. 이름이 암시하듯이 전 세계적으로 작동하며, 클래스 이름이 암호화되어 있어 Parse가 해당 ID를 검색할 위치를 알 수 있습니다.

5 - 다시 가져오기

또한 Global Id를 사용하여 다음과 같이 Relay의 사양을 미리 가져올 수 있습니다:

1   query RefetchQuery{
2     node(id:"RmFjdGlvbjpFYVQwZERrMDl2"){
3       id ... on Faction{
4         name
5       }
6     }
7   }

이것은 다음과 같은 결과를 가져옵니다.

1   {
2     "data": {
3       "node": {
4         "id": "RmFjdGlvbjpFYVQwZERrMDl2",
5         "name": "Galactic Empire"
6       }
7     }
8   }

6 - 연결

릴레이의 연결은 GraphQL을 사용하여 Parse에서도 동일하게 작동하므로, Rebel의 함선을 검색해야 하는 경우:

1   query RebelsShipsQuery {
2     faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
3       objectId
4       name
5       ships{
6         edges{
7           node{
8             name
9           }
10        }
11      }
12    }
13  }

다음과 같은 결과가 나옵니다:

1   {
2     "data": {
3       "faction": {
4         "objectId": "aq036IRgdP",
5         "name": "Alliance to Restore the Republic",
6         "ships": {
7           "edges": [
8             {
9               "node": {
10                "name": "Y-Wing"
11              }
12            },
13            {
14              "node": {
15                "name": "X-Wing"
16              }
17            }
18          ]
19        }
20      }
21    }
22  }

Nth 함선도 검색할 수 있습니다:

1   query RebelsShipsQuery {
2     faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
3       objectId
4       name
5       ships(first: 1){
6         edges{
7           node{
8             name
9           }
10        }
11      }
12    }
13  }

결과는 다음과 같습니다.

1   {
2     "data": {
3       "faction": {
4         "objectId": "aq036IRgdP",
5         "name": "Alliance to Restore the Republic",
6         "ships": {
7           "edges": [
8             {
9               cursor
10              "node": {
11                "name": "Y-Wing"
12              }
13            }
14          ]
15        }
16      }
17    }
18  }

특정 선박 이후 N번째 선박을 커서 값을 사용하여 검색합니다:

1   query RebelsShipsQuery {
2     faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
3       objectId
4       name
5       ships(first: 1 after: "YXJyYXljb25uZWN0aW9uOjA"){ #cursor for the Y-wing ship
6         edges{
7           cursor
8           node{
9             name
10          }
11        }
12      }
13    }
14  }

다음과 같이 검색됩니다:

1   {
2     "data": {
3       "faction": {
4         "objectId": "aq036IRgdP",
5         "name": "Alliance to Restore the Republic",
6         "ships": {
7           "edges": [
8             {
9               "cursor": "YXJyYXljb25uZWN0aW9uOjE=",
10              "node": {
11                "name": "X-Wing"
12              }
13            }
14          ]
15        }
16      }
17    }
18  }

7 - 변이

우리는 또한 릴레이의 변이. 새로운 선박:

1   mutation createBWing($input: CreateShipInput!){
2     createShip(input: $input){
3       ship{
4         id
5         name
6       }
7     }
8   }

다음 쿼리 변수가 필요합니다:

1   {
2     "input":{
3       "fields": {
4         "name": "B-Wing"
5       }
6     }
7   }

그리고 다음과 같이 전역 ID와 이름을 반환합니다:

1   {
2     "data": {
3       "createShip": {
4         "ship": {
5           "id": "U2hpcDpXb21QZnVzeXVF",
6           "name": "B-Wing"
7         }
8       }
9     }
10   }