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

릴레이 호환성 소개 parse server graphql api는 현재 사용 가능한 최신 표준을 따르며, 고도로 확장 가능한 api와 야심찬 프론트엔드 프로젝트를 위해 설계되었습니다 parse 오픈 소스 팀은 graphql 서버 릴레이 https //relay dev/docs/en/graphql server specification 사양을 따르기로 선택했습니다 릴레이는 graphql로 구동되는 데이터 중심의 react 애플리케이션을 구축하기 위한 javascript 프레임워크로, 사용하기 쉽고 확장 가능하며, 무엇보다도 성능이 뛰어나도록 처음부터 설계되었습니다 릴레이는 정적 쿼리와 사전 코드 생성을 통해 이를 달성합니다 parse 3 10부터 릴레이 https //relay dev/docs/en/graphql server specification 와의 완전한 호환성이 구현되었습니다 이 문서는 이러한 구현을 안내합니다 전제 조건 이 튜토리얼을 시작하려면 다음이 필요합니다 back4app에서 생성된 앱 다음 링크를 참조하세요 새 앱 만들기 튜토리얼 back4app에서 앱을 만드는 방법을 배우기 위해 1 새 back4app 앱 만들기 우선, back4app에서 기존 앱이 생성되어 있는지 확인해야 합니다 그러나 새로운 사용자라면 이 튜토리얼 https //www back4app com/docs/get started/new parse app 을 확인하여 앱을 만드는 방법을 배울 수 있습니다 2 몇 개의 클래스 만들기 새로 생성된 앱에서 데이터베이스 브라우저 데이터베이스 브라우저 로 이동하여 클래스 만들기 클래스 만들기 버튼을 클릭하세요 클래스를 사용자 정의 사용자 정의 로 만들고 이름을 지정하세요 다음 relay 예제 스키마 https //relay dev/docs/en/graphql server specification#schema , faction, ship 및 기타 클래스와 일치하는 속성을 가진 클래스를 생성했습니다 그러나 이 문서를 따르도록 클래스를 생성할 수 있습니다 쿼리와 변형을 적절히 변경하세요 관례상 클래스는 대문자로 시작하고 camelcase 형식이며 공백 및 기호와 같은 특수 문자를 포함하지 않아야 합니다 완료되면 클래스 만들기 클래스 만들기 를 클릭하세요 3 graphql 콘솔 클래스와 속성을 생성한 후, api 콘솔 api 콘솔 로 가서 graphql 콘솔 graphql 콘솔 에서 쿼리와 변형을 실행할 수 있습니다 4 쿼리 우리의 첫 번째 쿼리는 objectid objectid 를 기반으로 객체를 검색합니다 ( id id 와 혼동하지 마세요) parse는 발전하였고 이제 쿼리는 objectid objectid , 이전 버전에서 id id 로 알려졌던 것을 지원하며, 이제는 global id global id , 즉 id id 를 지원합니다 이는 relay의 글로벌 id를 참조하며 클래스 이름이 암호화되어 포함된 더 긴 형식을 가집니다 objectid objectid eat0ddk09v id id (즉, 글로벌 id) rmfjdglvbjpfyvqwzerrmdl2 이제 objectid 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 global id 가 작동하기 때문에 발생합니다 이름이 암시하듯이 전 세계적으로 작동하며, 클래스 이름이 암호화되어 있어 parse가 해당 id를 검색할 위치를 알 수 있습니다 5 다시 가져오기 또한 global id global id 를 사용하여 다음과 같이 relay의 사양 https //relay dev/docs/en/graphql server specification#object identification 을 미리 가져올 수 있습니다 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 연결 릴레이의 연결 https //relay dev/docs/en/graphql server specification#connections 은 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 변이 우리는 또한 릴레이의 변이 https //relay dev/docs/en/graphql server specification#mutations 새로운 선박 선박 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 전역 id 와 이름 이름 을 반환합니다 1 { 2 "data" { 3 "createship" { 4 "ship" { 5 "id" "u2hpcdpxb21qznvzexvf", 6 "name" "b wing" 7 } 8 } 9 } 10 }