Flutter에서 GraphQL로 소프트웨어 데이터 관계 저장

graphql을 사용하여 관계형 데이터 저장하기 소개 지난 두 개의 튜토리얼에서는 flutter 앱 프로젝트에서 back4app 데이터베이스에 대해 graphql 쿼리와 변형을 수행했습니다 우리는 graphql flutter https //pub dev/packages/graphql flutter/install 를 graphql 클라이언트로 사용하고 있습니다 이는 매우 강력하고 널리 사용되는 프로젝트입니다 이러한 튜토리얼에서는 클래스에 가장 일반적인 유형을 가진 매우 간단한 데이터 모델을 사용했습니다 back4app은 관계형 데이터를 생성, 저장 및 쿼리할 수 있는 유연한 플랫폼입니다 이 튜토리얼에서는 back4app 백엔드에서 관계형 데이터를 저장하고 쿼리할 때 관계 및 포인터를 사용하는 방법을 보여주면서 이 기능을 깊이 탐구할 것입니다 또한 back4app이 제공하는 다른 데이터 유형인 geopointer 및 datetime도 탐색할 것입니다 목표 이 기사 끝에서 여러분은 다음을 할 수 있게 될 것입니다 관계형 데이터 생성/업데이트 및 삭제 (포인터 및 관계 사용) geopointers 생성/업데이트 날짜 시간 생성/업데이트 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 이전 두 가이드를 읽었는지 확인하세요 템플릿에서 시작하기 및 graphql 변형 프로젝트 파일을 github 저장소 에서 다운로드하세요 이 파일에는 이전 코드와 필요한 새로운 gui가 포함되어 있습니다 vs code 또는 android studio와 같은 flutter ide에서 다운로드한 프로젝트를 엽니다 여기에서 생성할 수 있는 back4app 계정이 필요합니다 여기 이전 튜토리얼에 따라 튜토리얼을 back4app에 연결하세요 템플릿에서 시작하기 1 백엔드 설정 우리의 이전 프로젝트 https //www back4app com/docs/flutter/flutter crud app example 에서 우리의 데이터 모델은 단일 클래스인 language로 매우 간단했습니다 이제 우리는 language와 관련된 2개의 새로운 클래스를 추가하여 더 복잡하게 만들 것입니다 형식이 있는 창립자 열 이름 설명 이름 언어의 창립자 이름 열 이름 설명 이름 소유 회사 이름 소유 날짜 회사가 소유권을 얻은 날짜 본사 회사의 본사 위치 우리는 클래스 language 와 클래스 founder 간의 일대일 관계를 parse pointers를 사용하여 생성할 것입니다 이는 특정 언어의 창립자를 알려줍니다 그런 다음, 우리는 클래스 language 와 클래스 ownership 간의 일대다 관계를 parse relations를 사용하여 생성할 것입니다 이는 어떤 조직/회사가 언어를 소유하고 있는지, 그들의 본사 및 언어 소유권을 취득한 날짜를 알려줍니다 데이터 모델은 다음과 같이 보일 것입니다 우리 앱으로 이동하기 전에 필요한 클래스와 데이터를 백엔드에 생성합시다 back4app 앱으로 가서 graphql playground로 이동합니다 아래의 뮤테이션을 사용하여 클래스 founder 를 생성하여 언어의 창립자 이름을 저장할 것입니다 1 mutation createclass { 2 createclass(input { 3 name "founder" 4 schemafields { 5 addstrings \[{name "name"}] 6 } 7 }){ 8 class{ 9 schemafields{ 10 name 11 typename 12 } 13 } 14 } 15 } 이제 창립자의 이름으로 클래스를 채워봅시다 다음 단계에서는 이 데이터를 사용하여 창립자 클래스에 포인팅하는 새로운 언어를 생성할 것입니다 아래의 변이를 back4app graphql playground에서 사용하여 창립자를 생성하세요 1 mutation createobject{ 2 createfounder(input {fields {name "james gosling"}}){ 3 founder{ 4 id 5 name 6 } 7 } 8 } 여기에서 우리는 java 프로그래밍 언어 창립자의 이름을 입력했습니다 다른 사람들에 대해서도 비슷하게 할 수 있지만 지금은 이것으로 가이드를 충분히 진행할 수 있습니다 이제 ownership 클래스를 생성하여 언어 소유권, 설립 날짜(날짜 시간) 및 소유자의 본사 위치(geopointer)를 저장할 것입니다 나중에 언어 클래스와 소유권 간의 관계를 생성할 것입니다 아래 코드를 실행하여 클래스를 생성하세요 1 mutation createclass { 2 createclass(input { 3 name "ownership" 4 schemafields { 5 addstrings \[{name "name"}] 6 adddates \[{name "date owned"}] 7 } 8 }){ 9 class{ 10 schemafields{ 11 name 12 typename 13 } 14 } 15 } 16 } 이제 다음 변형을 사용하여 ownership 클래스를 채우십시오 1 mutation createobject{ 2 createownership(input {fields {name "sun microsystems"}}){ 3 ownership{ 4 id 5 name 6 } 7 } 8 }1 mutation createobject{ 2 createownership(input {fields {name "oracle"}}){ 3 ownership{ 4 id 5 name 6 } 7 } 8 } 이제 페이지를 새로 고치고, ownership ownership 클래스로 데이터베이스 브라우저로 이동하십시오 오른쪽 상단에서 새 열 추가 를 선택하십시오 첫 번째 드롭다운에서 geopoint를 선택하고 두 번째 텍스트 필드에 headquarters 라고 이름을 지정하십시오 그리고 모든 것을 그대로 두고 열 추가 버튼을 누르십시오 그런 다음 데이터베이스 브라우저에서 언어 언어 수업으로 가십시오 관계를 추가해 보겠습니다 소유권 소유권 및 창립자 창립자 클래스에 새 열 추가 를 클릭한 다음 데이터 유형 포인터와 대상 클래스 선택 창립자 창립자 열에 동일한 이름 창립자 을 부여한 후 열 추가를 누르십시오 이제 소유권이라는 새 열을 추가하여 관계 데이터 유형을 사용하고 클래스 소유권 소유권 을 선택하여 이 과정을 반복하십시오 이제 flutter 앱에서 사용할 데이터 모델이 준비되었으며 데이터를 저장하고 업데이트할 수 있습니다 2 포인터 생성/추가 및 삭제 이제 프로젝트 보일러플레이트 코드를 github 리포지토리 https //github com/templates back4app/flutter graphql/tree/complex mutations 에서 다운로드하여 ide에서 엽니다 back4app에 프로젝트를 연결하려면 graphql playground로 이동하여 아래 이미지에 표시된 대로 키와 api url을 복사합니다 이제 이를 constants dart constants dart 에 붙여넣고 프로젝트를 실행합니다 에뮬레이터에서 애플리케이션을 실행합니다 하단의 m 플로팅 버튼으로 이동합니다 그러면 간단한 변형을 수행했던 페이지로 이동합니다 여기에서 추가 플로팅 액션 버튼 cm , 복잡한 graphql 변형을 수행하는 데 사용할 버튼입니다 cm 버튼을 클릭하면 이 가이드에서 수행할 각 작업에 대한 네 개의 버튼이 표시됩니다 이제 databaseutils dart databaseutils dart 파일을 열고 addpointers() addpointers() 메서드로 스크롤합니다 여기에서 포인터 추가 로직을 추가할 것입니다 우리는 james gosling을 java 언어의 창립자로 지정할 것입니다 따라서 먼저 back4app 백엔드로 이동하여 창립자(james gosling)와 언어(java)의 objectid objectid 를 복사해야 합니다 데이터에 대한 포인터 업데이트/생성 우리 앱으로 진행하십시오 databaseutils dart databaseutils dart 및 addpointers() addpointers() 메서드에서 string addpointerquery string addpointerquery 를 초기화하여 pointers를 추가하기 위한 graphql 쿼리를 다음과 같이 할당합니다 1 string addpointerquery= 2 ''' 3 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 4 updatelanguage(input {id \\$languageid, fields \\$founderid}) 5 { 6 language{ 7 objectid 8 } 9 } 10 } 11 '''; 그리고 final 변수 final 변수 를 초기화하여 변수를 할당합니다 rowobjectid rowobjectid 와 pointersid pointersid 를 매개변수로 사용합니다 rowobjectid rowobjectid 우리가 가리킬 행의 객체 id pointersid pointersid 가리킬 행의 객체 id 따라서 변수 변수 를 다음과 같이 선언합니다 1 final variable={ 2 "userid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "link" pointersid 6 } 7 } 8 }; 이제 마지막 가이드처럼 graphqlclient graphqlclient 를 초기화하고 queryoptions() queryoptions() 의 도움으로 쿼리를 전송하고 queryresults() queryresults() 의 인스턴스를 반환합니다 1 graphqlconfiguration configuration = graphqlconfiguration(); 2 graphqlclient client = configuration clienttoquery(); 3 4 queryresult queryresult = await client query( 5 queryoptions(documentnode gql(addpointerquery), variables variable), 6 ); 7 return queryresult; 당신의 addpointers() addpointers() 메서드는 다음과 같아야 합니다 1 future\<queryresult> addpointers(string rowobjectid, string pointersid) async{ 2 print('addpointers'); 3 //code for add/update pointers 4 string addpointerquery= 5 ''' 6 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 7 updatelanguage(input {id \\$languageid, fields \\$founderid}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "userid" rowobjectid, 17 "founderid" { 18 "founder" { 19 "link" pointersid 20 } 21 } 22 }; 23 graphqlconfiguration configuration = graphqlconfiguration(); 24 graphqlclient client = configuration clienttoquery(); 25 26 queryresult queryresult = await client query( 27 queryoptions(documentnode gql(addpointerquery), variables variable), 28 ); 29 return queryresult; 30 } 이제 앱을 핫 리스타트하고, cm 버튼을 클릭한 후 add pointers 버튼을 누르세요 여기서 첫 번째 텍스트 필드에 포인터를 추가해야 하는 objectid objectid 를 입력하고, 두 번째 텍스트 필드에 포인터가 가리킬 objectid objectid 를 입력한 후 done 이제 대시보드를 확인하면 founder 열 아래에 관계를 볼 수 있어야 합니다 클릭하면 founder 클래스가 가리키는 행으로 이동합니다 데이터에 대한 포인터 삭제 이제 관계를 삭제하는 로직을 작성할 deletepointers() deletepointers() 메서드로 진행합니다 관계를 삭제하려면 위의 쿼리에 약간의 변경만 하면 됩니다 즉, 변수에서 "link" "link" 를 "remove" "remove" 로 변경하면 됩니다 따라서 final variable final variable 을 초기화한 후에는 다음과 같을 것입니다 1 final variable={ 2 "languageid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "remove" pointersid 6 } 7 } 8 }; 나머지는 addpointers() addpointers() 와 정확히 동일하게 보일 것입니다 따라서 당신의 deletepointers() deletepointers() 메서드는 다음과 같습니다 1 future\<queryresult> deletepointers(string rowobjectid, string pointersid) async{ 2 print('deletepointers'); 3 //code for delete pointers 4 string removepointersquery= 5 ''' 6 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 7 updatelanguage(input {id \\$languageid, fields \\$founderid}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "languageid" rowobjectid, 17 "founderid" { 18 "founder" { 19 "remove" pointersid 20 } 21 } 22 }; 23 graphqlconfiguration configuration = graphqlconfiguration(); 24 graphqlclient client = configuration clienttoquery(); 25 26 queryresult queryresult = await client query( 27 queryoptions(documentnode gql(removepointersquery), variables variable), 28 ); 29 return queryresult; 30 31 } 이제 back4app 대시보드로 이동하여 특정 행의 창립자 열이 삭제된 것을 확인할 수 있습니다 3 날짜 시간 데이터 생성/추가 및 삭제 기억하신다면 우리는 ownership 클래스를 step 1 에서 생성하고 그 안에 데이터를 저장했습니다 이들은 java 프로그래밍 언어를 소유한 회사들의 이름입니다 그러므로 먼저 소유권을 취득한 날짜를 입력해 보겠습니다 이제 databaseutils dart databaseutils dart 로 이동하여 adddatetime() adddatetime() 함수를 생성하거나 스크롤하여 찾습니다 여기서 우리는 클래스에 날짜 시간 데이터 유형을 추가하는 로직을 작성할 것입니다 string adddatetimequery string adddatetimequery 를 초기화하고 날짜 시간 데이터를 생성하기 위한 쿼리를 할당합니다 1 string adddatetimequery= 2 ''' 3 mutation addtime(\\$rowid id!,\\$dateowned date!){ 4 updateownership(input {id \\$rowid, fields {date owned \\$dateowned}}) 5 { 6 ownership{ 7 objectid 8 } 9 } 10 } 11 '''; 그리고 final 변수 final 변수 는 다음과 같습니다 1 final variable={ 2 "rowid" rowobjectid, 3 "dateowned" datetime 4 }; 이제 graphqlclient graphqlclient 를 초기화하고 queryoption() queryoption() 을 통해 쿼리를 전달하세요 이것이 당신의 함수가 어떻게 보일지입니다 1 future\<queryresult> adddatetime(string rowobjectid, string datetime) async{ 2 print('adddatetime'); 3 //code for add/update date time 4 string adddatetimequery= 5 ''' 6 mutation addtime(\\$rowid id!,\\$dateowned date!){ 7 updateownership(input {id \\$rowid, fields {date owned \\$dateowned}}) 8 { 9 ownership{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "rowid" rowobjectid, 17 "dateowned" datetime 18 }; 19 graphqlconfiguration configuration = graphqlconfiguration(); 20 graphqlclient client = configuration clienttoquery(); 21 queryresult queryresult = await client query( 22 queryoptions(documentnode gql(adddatetimequery), variables variable), 23 ); 24 return queryresult; 25 } 이제 hot restart 애플리케이션을 실행하고 objectid 를 기록하세요 sun microsystems 이 포함된 행의 name 열에서 add date time 버튼을 누르세요 이제 첫 번째 텍스트 필드에 기록한 objectid 를 입력하고 “02 24 1982” 를 mm dd yyyy 형식으로 입력한 후 java가 발표된 날에 done 버튼을 누르세요 back4app 백엔드로 진행하면 24 feb 1982 at 00 00 00 utc 형식으로 날짜가 표시되며, 이는 데이터 유형이 날짜 시간 데이터 유형으로 식별되었음을 의미합니다 마찬가지로 “01 27 2010” 을 date owned 에 추가할 수 있습니다 oracle 에 대해 4 geopointer 데이터 추가/업데이트 회사의 본사를 찾기 위해 ownership 테이블에 geopointer 데이터를 추가해 보겠습니다 database utils dart 파일로 이동하여 아래로 스크롤하여 addgeopointers() 함수로 가십시오 이제 string addgeopointers 를 초기화하고 해당 쿼리를 할당합니다 1 string addgeopointers= 2 ''' 3 mutation addgeopointer(\\$objectid id!,\\$latitude float!,\\$longitude float!){ 4 updateownership(input {id \\$objectid, fields { headquarters {latitude \\$latitude, longitude \\$longitude}}}) 5 { 6 ownership{ 7 objectid 8 } 9 } 10 } 11 '''; 그리고 final variable 로 1 final variable={ 2 "objectid" rowobjectid, 3 "latitude" double parse(latitude), 4 "longitude" double parse(longitude), 5 }; 위도 latitude 와 longitude 가 double 값이므로, 이를 string에서 double로 파싱해야 합니다 grapqlclient 를 초기화하고 queryoption() 로 쿼리를 전달합니다 이렇게 하면 addgeopointers() 함수는 다음과 같이 보일 것입니다 1 future\<queryresult> addgeopointers(string rowobjectid, string latitude, string longitude) async{ 2 print('add geopointers'); 3 //code for add/update geopointers 4 string addgeopointers= 5 ''' 6 mutation addgeopointer(\\$objectid id!,\\$latitude float!,\\$longitude float!){ 7 updateownership(input {id \\$objectid, fields { headquarters {latitude \\$latitude, longitude \\$longitude}}}) 8 { 9 ownership{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "objectid" rowobjectid, 17 "latitude" double parse(latitude), 18 "longitude" double parse(longitude), 19 }; 20 graphqlconfiguration configuration = graphqlconfiguration(); 21 graphqlclient client = configuration clienttoquery(); 22 queryresult queryresult = await client query( 23 queryoptions(documentnode gql(addgeopointers), variables variable), 24 ); 25 return queryresult; 26 } 앱을 핫 리스타트하고 add geopointers 버튼을 선택하세요 첫 번째 텍스트 상자에 37 35 37 35 를 입력하고 두 번째 텍스트 상자에 121 95 121 95 를 입력하세요 sun microsystems의 objectid 를 입력하고 name 을 입력한 후 완료를 누르세요 이제 back4app 백엔드로 이동하면 (37 35, 121 95) 가 표시되며, 이는 본사를 나타내는 좌표로 geopointers로 식별됩니다 5 관계 추가/업데이트 및 삭제 포인터는 한 행만 가리킬 수 있지만, 관계의 도움으로 여러 행에 연결할 수 있습니다 따라서 language 테이블을 ownership 의 java 언어에 대해 이 두 행과 관계를 맺어 보겠습니다 관계 추가/업데이트 다음으로 진행하십시오 database utils dart database utils dart 파일로 가서 addrelation() addrelation() 함수로 로직을 작성하십시오 string addrelationquery string addrelationquery 를 초기화하고 관계에 대한 쿼리를 다음과 같이 할당하십시오 1 string addrelationquery= 2 ''' 3 mutation addrelation(\\$objectid id!, \\$relationid ownershiprelationinput){ 4 updatelanguage(input {id \\$objectid, fields {ownership \\$relationid}}) 5 { 6 language{ 7 objectid 8 } 9 } 10 } 11 '''; 그리고 최종 변수 최종 변수 는 다음과 같습니다 1 final variable= { 2 "objectid" objectid, 3 "relationid" relationid 4 }; 따라서 graphqlclient graphqlclient 를 초기화하고 이전과 같이 쿼리를 전달한 후, 당신의 database utils dart database utils dart 는 다음과 같이 보일 것입니다 1 future\<queryresult> addrelation(string rowobjectid, string relationid) async{ 2 //code for add/update relation 3 print('addrelation'); 4 string addrelationquery= 5 ''' 6 mutation addrelation(\\$objectid id!, \\$relationid ownershiprelationinput){ 7 updatelanguage(input {id \\$objectid, fields {ownership \\$relationid}}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable= { 16 "objectid" rowobjectid, 17 "relationid" { 18 "add" relationid 19 } 20 }; 21 graphqlconfiguration configuration = graphqlconfiguration(); 22 graphqlclient client = configuration clienttoquery(); 23 queryresult queryresult = await client query( 24 queryoptions(documentnode gql(addrelationquery), variables variable), 25 ); 26 print(queryresult); 27 return queryresult; 28 } 성공 귀하의 앱이 드디어 back4app에 관계형, 날짜 및 geopointers 데이터를 저장했습니다! 결론 이 가이드에서는 flutter 앱 프로젝트를 사용하여 back4app에 관계형 데이터를 저장하는 방법을 배웠습니다 또한 geopointers 및 datetime과 같은 다른 graphql 변형을 사용하여 데이터를 생성, 업데이트 및 삭제하는 작업을 수행했습니다 다음 튜토리얼에서는 flutter 앱에 대한 쿼리를 깊이 있게 다룰 것입니다 이 가이드는 hybrowlabs https //www back4app com/partners/software development company 에 의해 작성되었습니다