Flutter 개발자를 위한 GraphQL 개요 및 도구 사용법

back4app에서의 flutter graphql 소개 back4app 문서를 탐색하고 계시므로, back4app이 유연한 로우 코드 백엔드라는 것을 알고 계실 것입니다 이는 여러 가지 방법으로 백엔드와 상호작용할 수 있게 해줍니다 원하신다면 rest api를 사용할 수 있고, 또는 네이티브 sdk https //pub dev/packages/parse server sdk 를 flutter에 직접 사용할 수 있습니다 이 튜토리얼 시리즈에서는 flutter와 함께 새로운 멋진 graphql api를 사용하는 방법을 탐구할 것입니다 이 가이드는 hybrowlabs의 back4app 파트너 https //www back4app com/partners/software development company 인 chinmay에 의해 작성되었습니다 목표 graphql 개요 얻기; graphql과 flutter의 관계 이해하기; graphql을 위한 flutter 도구 및 라이브러리 이해하기; flutter graphql 애플리케이션의 일반 아키텍처 및 주요 개념 이해하기; 전제 조건 사용자가 dart와 flutter에 대한 기본적인 이해를 가지고 있어야 합니다; 필수는 아니지만, graphql 요리책은 back4app graphql 사양 을 이해하는 데 유용할 것입니다 graphql이란 무엇인가 graphql은 rest api 표준에 대한 대안 아키텍처입니다 graphql은 facebook 팀이 네이티브 애플리케이션을 처음부터 다시 구축할 때 태어났으며, 백엔드에서 받은 데이터를 최적화할 필요가 컸습니다 그들은 서비스를 자원 집합으로 리팩토링하는 동안 아무런 진전을 보지 못해 좌절했습니다 그들은 한 걸음 물러서서 데이터를 고립된 rest 자원이 아닌 상호 연결된 객체의 그래프로 재구성했습니다 이것은 그들의 애플리케이션 아키텍처에 큰 변화를 가져왔고, 그렇게 해서 graphql이 탄생했습니다 graphql은 2015년에 공개된 이후로 엄청난 인기를 얻었고, twitter, airbnb, atlassian, github과 같은 팀에서 사용되고 있습니다 왜 graphql인가? hybrowlabs에서는 back4app 파트너 https //www back4app com/partners/software development company , 현대적이고 데이터 집약적인 웹 및 모바일 애플리케이션을 구축합니다 우리는 사용의 용이성, 최적화 및 이미 훌륭한 데이터베이스 위에 제공되는 스키마 정의 기능 덕분에 back4app을 우리의 선택된 백엔드 서비스로 채택했습니다 대부분의 경우 우리가 엔지니어링하는 데이터는 단일 back4app 클래스에서만 표시되거나 조작되는 것이 아닙니다 오히려 이 데이터는 여러 클래스에서 옵니다 back4app graphql 조합은 이러한 시나리오를 처리하는 것을 매우 쉽게 만들어 줍니다 그동안 우리는 화면 로드당 2 3회의 호출로 네트워크 발자국을 줄일 수 있으며, 원하는 데이터만 가져옵니다 반면에 우리가 정의한 클라우드 코드는 graphql의 강력한 타입 특성 덕분에 쉽게 문서화됩니다 이는 우리의 코드를 유지 관리 가능하고 이해하기 쉽게 만듭니다 tldr; graphql 사용의 장점은 다음과 같습니다 네트워크 발자국이 최소화됩니다 효율적인 쿼리 및 쿼리 배치 더 나은 코드 관리 강력한 타입 특성이 예측 가능성을 제공합니다 flutter와 back4app graphql nosql 데이터베이스의 유연성을 결합하면서 graphql의 타입 및 스키마 구조가 제공하는 구조와 조직을 유지하는 graphql 백엔드 솔루션을 설계하는 것은 종종 매우 어렵습니다 back4app은 항상 이러한 구조화된 스키마 기반 디자인을 가지고 있었고 이제 graphql은 타입 시스템의 의미를 알고 있는 api를 생성함으로써 이를 새로운 차원으로 끌어올립니다 한편, 우리가 아는 바와 같이 dart(flutter의 기반 언어)는 강타입 언어입니다 네, dart는 타입 안전성에 대해 매우 엄격합니다 graphql을 사용하면 클라이언트 측에서 재사용할 수 있는 스키마가 있습니다 이는 삶을 훨씬 더 쉽게 만듭니다 또한 미래에 가져올 수 있는 타입 스키마를 아는 것은 고급 캐싱 및 쿼리 무효화 알고리즘을 이 데이터에 구현할 수 있게 해주기 때문에 정말 도움이 됩니다 back4app graphql을 위한 flutter 툴킷 우리의 graphql api와 상호작용하기 위해 우리는 멋진 graphql flutter https //github com/zino app/graphql flutter 라이브러리를 활용할 것입니다 그러니 라이브러리가 제공하는 기능을 이해해 봅시다 쿼리 및 변형 지원 back4app 대시보드에 정의된 모든 스키마는 back4app graphql 엔드포인트로 직접 변환되며, 쿼리 또는 변형으로 사용할 수 있습니다 쿼리를 통해 단일 api 호출로 여러 클래스에서 중첩된 데이터를 가져올 수 있습니다 쿼리는 주로 데이터 가져오기를 목적으로 하며, 캐시됩니다 back4app graphql은 지리 위치, 시간, 정규 표현식 및 전체 텍스트 검색 기능을 지원하는 풍부한 쿼리 메서드를 제공합니다 변형을 통해 여러 클래스 항목을 업데이트할 수 있는 api 호출을 할 수 있습니다 변형은 주로 데이터 생성, 편집, 삭제로 구성됩니다 다음은 제가 back4app에서 만든 programinglanguage 클래스입니다 back4app의 api에서 graphql 섹션으로 이동하면, 이전에 설명된 back4app 콘솔을 볼 수 있습니다 이 콘솔에는 이제 모든 변형 및 쿼리가 자동으로 생성됩니다! back4app의 api에서 graphql 섹션으로 가면, 이전에 설명된 back4app 콘솔을 볼 수 있습니다 이 콘솔에는 이제 모든 변형 및 쿼리가 자동으로 생성됩니다! 위의 그림에서 저는 programminglanguage 클래스의 모든 언어 목록을 위해 back4app graphql을 사용했습니다 유사하게, 변형을 활용하여 programminglanguage back4app 클래스에 항목을 생성할 수 있습니다 쿼리 폴링 1 query( 2 query( 3 options queryoptions( 4 document get all programming languages, // this is the query string you just created 5 pollinterval 10, //setting up polling 6 ), 7 builder (queryresult result) { 8 if (result errors != null) { 9 return text(result errors tostring()); 10 } 11 12 if (result loading) { 13 return text('loading'); 14 } 15 16 // it can be either map or list 17 list programminglanguages = result data\['programminglanguages']; 18 19 return listview\ builder( 20 itemcount programminglanguages length, 21 itembuilder (context, index) { 22 final repository = programminglanguages\[index]; 23 return text(programminglanguages\['name']); 24 }); 25 }, 26 ); 일부 사용 사례에서는 구독이 과도할 수 있습니다 데이터를 주기적으로 새로 고쳐야 하므로 클라이언트의 쿼리 폴링 기능을 사용할 수 있습니다 이 기능을 통해 최신 데이터를 주기적으로 가져올 수 있습니다 예를 들어, 매 1분마다 백그라운드 데이터 가져오기를 수행할 수 있습니다 메모리 내 캐시 1 static future\<queryresult> callquery( 2 {dynamic documentnode, dynamic variables, fetchpolicy fetchpolicy}) { 3 return singleton client query( 4 queryoptions( 5 context singleton context, 6 documentnode documentnode, 7 variables variables, 8 fetchpolicy fetchpolicy ?? fetchpolicy cacheandnetwork, 9 ), 10 ); 11 } flutter graphql 클라이언트는 데이터를 캐싱하는 다양한 방법을 구현합니다 그들은 다음과 같습니다 재검증 중 캐시 기사를 목록으로 가져오는 간단한 예를 고려해 보겠습니다 목록에서 특정 기사로 이동한 다음 다시 돌아갈 때 목록 데이터가 캐시되기를 원합니다 재검증 중 캐시 메커니즘은 데이터를 쿼리하는 이 방법을 구현합니다 이는 데이터 가져오기를 위해 api 호출이 이루어지고 있지만, 새로운 데이터가 가져와지는 동안 이전 데이터가 표시된다는 것을 의미합니다 새로운 데이터가 사용 가능해지면 그때 표시됩니다 캐시 전용 이 방법에서는 장치에 데이터가 없을 경우에만 네트워크 호출이 이루어집니다 이는 변경되지 않을 데이터 포인트에 대한 오프라인 동기화 기능과 결합될 때 가치가 있습니다 이는 네트워크를 최적화하고 자원을 절약합니다 네트워크 전용 데이터를 캐시하고 싶지 않은 드문 경우에는 flutter graphql 라이브러리의 네트워크 전용 모드를 사용할 수 있습니다 오프라인 캐시 동기화 모바일 경험은 기본적으로 오프라인 사용이 가능해야 한다고 기대합니다 flutter와 rest api를 사용하여 이를 수행하는 것은 매우 번거롭습니다 데이터를 sqlite 데이터베이스에 저장하고, 데이터가 존재하는지 확인하고, 데이터를 가져오기 위해 sql 쿼리를 작성한 다음, 데이터를 업데이트하기 위해 네트워크 호출도 해야 합니다 이는 많은 작업이며, 이 플러그인을 사용하면 모든 작업이 우회되고 쿼리에 대한 오프라인 지원이 우리의 flutter 애플리케이션에 내장되어 있습니다 파일 저장소 1 mutation($files \[upload!]!) { 2 multipleupload(files $files) { 3 id 4 filename 5 mimetype 6 path 7 } 8 } 9 10 import 'package\ http/http dart'; 11 12 // 13 14 string filepath = '/aboslute/path/to/file ext'; 15 final file = await multipartfilefrom(file(filepath)); 16 17 final queryresult r = await graphqlclientclient mutate( 18 mutationoptions( 19 documentnode gql(uploadmutation), 20 variables { 21 'files' \[file], 22 }, 23 ) 24 );gr 많은 graphql 서버 라이브러리는 graphql 쿼리를 사용하여 파일 업로드 기능을 지원하지 않습니다 파일을 업로드하기 위해서는 별도의 rest 엔드포인트를 호출해야 합니다 파일을 업로드하고, url을 가져온 다음, 이를 문자열 형태로 graphql api에 전달해야 합니다 또한, 파일 이름 등과 같은 파일 메타데이터를 수동으로 유지해야 합니다 back4app은 back4app graphql api에 내장된 파일 업로드 표준을 지원합니다 파일이 업로드되면 graphql의 file 유형으로 업로드되며, 이는 graphql의 back4app file에 해당합니다 자동으로, 우리는 aws s3에 의해 지원되는 고도로 확장 가능한 back4app 파일 저장소에 파일을 저장했습니다 낙관적인 결과 1 flutterwidget( 2 ontap () { 3 togglestar( 4 { 'starrableid' repository\['id'] }, 5 optimisticresult { 6 'action' { 7 'starrable' {'viewerhasstarred' !starred} 8 } 9 }, 10 ); 11 }, 12 ) 사용자들은 매우 매력적인 ui와 즉각적인 피드백을 기대하게 되었습니다 낙관적인 ui는 본질적으로 우리가 행동이 완료될 때까지 기다리지 말고, 대신 우리가 행동을 완료했음을 사용자에게 피드백으로 보여줘야 한다고 말하는 ui/ux 원칙입니다! 이는 행동이 대부분 99%의 확률로 성공할 것이라는 가정 하에 이루어집니다 만약 행동이 불행히도 실패하면, 우리는 행동을 완료할 수 없었다는 실패 메시지를 보여줍니다 flutter graphql은 낙관적인 변이를 정의하는 데 내장된 지원을 제공하여 이 복잡한 ui 상호작용 시스템을 구현하는 것을 훨씬 쉽게 만듭니다 따라서 이를 통해 우리는 현대 애플리케이션을 구축하기 위한 매우 잘 최적화된 기반을 갖추게 됩니다 결론 이 가이드에서는 back4app에서 flutter 프로젝트에 graphql을 사용할 때의 몇 가지 중요한 장점을 소개했습니다 다음 가이드에서는 코드를 다루고 back4app api를 사용하기 위해 flutter graphql 클라이언트를 설정하는 것으로 시작할 것입니다