플러터에서 GraphQL 클라이언트 정밀 설정 및 접속 가이드

플러터 graphql 설정 소개 지난 튜토리얼에서는 flutter와 함께 back4app graphql을 사용하는 이점을 이해했습니다 이 기사에서는 프로젝트의 기본 구조를 설정하고 back4app 서버에 연결할 것입니다 목표 플러터 환경 설정 플러터 graphql 설정 해부 플러터 graphql 연결 플러터 graphql 연결 재사용 및 패턴 전제 조건 사용자가 dart와 flutter에 대한 기본적인 이해를 가지고 있어야 합니다; 필수는 아니지만, graphql 요리책이 graphql 개념 을 이해하는 데 유용할 것입니다 0 back4app 허브에서 앱 설정 앱을 생성해야 합니다 문서에서 다음을 따를 수 있습니다 https //www back4app com/docs/get started/new parse app https //www back4app com/docs/get started/new parse app 이 튜토리얼을 위해 필요한 클래스를 설정하기 위해 back4app 허브를 사용할 것입니다 다음으로 가십시오 https //www back4app com/database/chinmay/flutter graphql https //www back4app com/database/chinmay/flutter graphql api에 연결을 클릭하십시오 새로 생성된 앱을 선택한 다음 완료입니다! 1 flutter 설정하기 flutter 설정은 비교적 간단합니다 우리는 공식 flutter 웹사이트 https //flutter dev/docs/get started/install 의 설정 지침을 따를 것입니다 이후 우리는 다음 명령어를 사용하여 간단한 flutter 애플리케이션을 만들 것입니다 명령어 flutter doctor flutter doctor 를 사용하여 모든 것이 정상인지 확인하세요 애플리케이션을 실행합니다 2 flutter graphql 라이브러리 설치하기 이 클라이언트를 구현하기 위해 첫 번째 기사에서 언급한 flutter graphql 라이브러리를 사용할 것입니다 이제 이 라이브러리를 패키지에 추가하겠습니다 pubspec yaml pubspec yaml 3 flutter graphql 공급자 만들기 graphql에서는 여러 엔드포인트와 작업할 필요가 없으며, 요청 데이터를 쿼리하는 데 사용되는 단일 엔드포인트만 있습니다 그리고 우리는 그 엔드포인트에 graphql 쿼리를 보냅니다 일반적으로 우리가 하는 일은 적절한 헤더를 보내고 쿼리를 필요에 맞게 형식화하는 클라이언트의 인스턴스를 만드는 것입니다 우리는 클라이언트를 만들 것이며, 이를 위해 링크(httplink 클래스의 인스턴스)와 캐시 저장소가 필요합니다 우리는 httplink httplink 을 링크로 사용하고 optimisticcache를 캐싱에 사용할 것입니다 코드는 다음과 같이 작성됩니다 다음은 main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart 에 작성할 내용입니다 1 final httplink httplink = httplink( 2 uri 'https //parseapi back4app com/graphql', 3 headers { 4 'x parse application id' kparseapplicationid, 5 'x parse client key' kparseclientkey, 6 }, //getheaders() 7 ); 8 9 valuenotifier\<graphqlclient> client = valuenotifier( 10 graphqlclient( 11 cache optimisticcache(dataidfromobject typenamedataidfromobject), 12 link httplink, 13 ), 14 ); 15 4 graphql을 사용하여 back4app에 연결하기 “api 콘솔” > “graphql 콘솔” 옵션에서 back4app 대시보드로 이동합니다 기록해 두세요 api url parse 앱 id parse 클라이언트 id 우리는 constants dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart 라는 새 파일을 lib lib 폴더에 생성할 것입니다 5 데이터 쿼리하기 우리의 컴포넌트는 graphqlprovider 위젯으로 감싸질 것이며, 이는 위젯에 필요한 세부 정보를 제공할 것입니다 우리는 2단계에서 생성한 클라이언트의 인스턴스를 제공해야 합니다 우리는 graphql 콘솔을 사용하여 쿼리를 작성할 것입니다 graphql 쿼리에 대해 더 알고 싶다면 graphql 요리책 섹션 https //www back4app com/docs/parse graphql/graphql getting started 1 import 'package\ graphql flutter/graphql flutter dart'; 2 import 'constants dart'; 3 4 class myhomepagestate extends state\<myhomepage> { 5 string name; 6 string saveformat; 7 string objectid; 8 9 string query = ''' 10 query findlanguages{ 11 languages{ 12 count, 13 edges{ 14 node{ 15 name, 16 saveformat 17 } 18 } 19 } 20 } 21 '''; 22 23 @override 24 widget build(buildcontext context) { 25 return safearea( 26 child scaffold( 27 appbar appbar( 28 title text( 29 'parsing data using graphql', 30 ), 31 ), 32 body query( 33 options queryoptions( 34 documentnode gql(query), 35 ), 36 builder ( 37 queryresult result, { 38 refetch refetch, 39 fetchmore fetchmore, 40 }) { 41 if (result data == null) { //check if data is loading 42 return center( 43 child text( 44 "loading ", 45 style textstyle(fontsize 20 0), 46 )); 47 } 48 //to implement rendering logic 49 }, 50 ), 51 ), 52 ); 53 } 54 } 6 목록 렌더링 우리는 listview listview 위젯을 사용하여 목록을 렌더링할 것입니다, main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart 1 else { 2 return listview\ builder( 3 itembuilder (buildcontext context, int index) { 4 return listtile( 5 title text(result data\["programminglanguages"]\["edges"]\[index]\["node"]\['name']), 6 trailing text( 7 result data\["programminglanguages"]\["edges"]\[index] 8 \["node"]\['stronglytyped'] ? "strongly typed" "weekly typed" 9 ), 10 ); 11 }, 12 itemcount result data\["programminglanguages"]\["edges"] length, 13 ); 14 } 15 우리는 화면에서 다음을 얻어야 합니다 결론 우리는 flutter graphql 클라이언트를 구성하고 back4app graphql api에 연결했습니다 같은 코드 찾으실 수 있습니다 https //github com/templates back4app/flutter graphql/tree/flutter graphql setup https //github com/templates back4app/flutter graphql/tree/flutter graphql setup