플러터에서 GraphQL 클라이언트 정밀 설정 및 접속 가이드
플러터 GraphQL 설정
소개
지난 튜토리얼에서는 Flutter와 함께 Back4app GraphQL을 사용하는 이점을 이해했습니다. 이 기사에서는 프로젝트의 기본 구조를 설정하고 Back4app 서버에 연결할 것입니다.
목표
- 플러터 환경 설정
- 플러터 GraphQL 설정 해부
- 플러터 GraphQL 연결
- 플러터 GraphQL 연결 재사용 및 패턴
전제 조건
- 사용자가 Dart와 Flutter에 대한 기본적인 이해를 가지고 있어야 합니다;
0 - Back4app 허브에서 앱 설정
앱을 생성해야 합니다. 문서에서 다음을 따를 수 있습니다: https://www.back4app.com/docs/get-started/new-parse-app
이 튜토리얼을 위해 필요한 클래스를 설정하기 위해 Back4app 허브를 사용할 것입니다. 다음으로 가십시오: https://www.back4app.com/database/chinmay/flutter-graphql. API에 연결을 클릭하십시오.
새로 생성된 앱을 선택한 다음 완료입니다!
1 - Flutter 설정하기
Flutter 설정은 비교적 간단합니다. 우리는 공식 Flutter 웹사이트의 설정 지침을 따를 것입니다. 이후 우리는 다음 명령어를 사용하여 간단한 Flutter 애플리케이션을 만들 것입니다:
명령어 flutter doctor를 사용하여 모든 것이 정상인지 확인하세요. 애플리케이션을 실행합니다:
2 - Flutter GraphQL 라이브러리 설치하기
이 클라이언트를 구현하기 위해 첫 번째 기사에서 언급한 flutter_graphql 라이브러리를 사용할 것입니다. 이제 이 라이브러리를 패키지에 추가하겠습니다 pubspec.yaml.
3 - Flutter GraphQL 공급자 만들기
GraphQL에서는 여러 엔드포인트와 작업할 필요가 없으며, 요청 데이터를 쿼리하는 데 사용되는 단일 엔드포인트만 있습니다. 그리고 우리는 그 엔드포인트에 GraphQL 쿼리를 보냅니다. 일반적으로 우리가 하는 일은 적절한 헤더를 보내고 쿼리를 필요에 맞게 형식화하는 클라이언트의 인스턴스를 만드는 것입니다. 우리는 클라이언트를 만들 것이며, 이를 위해 링크(HttpLink 클래스의 인스턴스)와 캐시 저장소가 필요합니다. 우리는 HttpLink을 링크로 사용하고 OptimisticCache를 캐싱에 사용할 것입니다. 코드는 다음과 같이 작성됩니다:
다음은 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 );
154 - GraphQL을 사용하여 Back4app에 연결하기
“API 콘솔” > “GraphQl 콘솔” 옵션에서 Back4app 대시보드로 이동합니다:
기록해 두세요:
- API URL
- Parse 앱 ID
- Parse 클라이언트 ID
우리는 constants.dart라는 새 파일을 lib 폴더에 생성할 것입니다.
5 - 데이터 쿼리하기
우리의 컴포넌트는 GraphQLProvider 위젯으로 감싸질 것이며, 이는 위젯에 필요한 세부 정보를 제공할 것입니다. 우리는 2단계에서 생성한 클라이언트의 인스턴스를 제공해야 합니다. 우리는 GraphQL 콘솔을 사용하여 쿼리를 작성할 것입니다. GraphQL 쿼리에 대해 더 알고 싶다면 GraphQL 요리책 섹션.
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 위젯을 사용하여 목록을 렌더링할 것입니다, 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.