--- title: Flutter GraphQL로 오프라인 우선 데이터베이스 구현 slug: docs-kr/flutter/graphql/offline-first-database description: Flutter와 GraphQL을 사용하여 오프라인 상태에서도 작동하는 데이터베이스를 기술적으로 구현하는 방법. 개발자를 위한 튜토리얼. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-18T19:44:48.070Z --- # 오프라인 우선 데이터베이스를 GraphQL API를 사용하여 구현하기 ## 소개 여기 계신다면, 나머지 튜토리얼을 통해 GraphQL 쿼리 및 변형을 실행하여 데이터를 가져오고 수정하는 방법에 익숙하실 것입니다. 이 문서에서는 Flutter와 GraphQL을 사용하여 오프라인 우선 사용자 인터페이스를 구현하는 방법을 탐구할 것입니다. ## 목표 - Flutter GraphQL 오프라인 클라이언트의 내부 아키텍처 이해하기 - 애플리케이션이 오프라인 상태에서도 GraphQL 쿼리를 실행할 수 있도록 허용하기 - 오프라인 데이터 지속성 구현하기 ## 전제 조건 :::hint{type="info"} - 사용자가 Dart와 Flutter에 대한 기본적인 이해가 필요합니다. - 필수는 아니지만, GraphQL 요리책이 일부 [GraphQL 개념](https://www.back4app.com/docs/parse-graphql/graphql-getting-started)을 이해하는 데 유용할 것입니다. - 다음의 필수 주제를 완료해야 합니다. [Flutter GraphQL 설정](https://www.back4app.com/docs/flutter/graphql/flutter-graphql-setup) 및 이전 코드 설정과 back4app 백엔드 구현이 필요합니다. ::: ## 1 - 오프라인 캐시 설정하기 Flutter GraphQL 클라이언트는 기본적으로 “오프라인 쿼리”를 지원합니다. 즉, 오프라인 상태에서 GraphQL 데이터를 쿼리할 때 오류를 발생시키지 않으며 캐시에서 데이터를 가져옵니다. 우리는 이것이 앱 세션 간에 캐시를 지속하는 것과 다르다는 점을 주목해야 합니다. 특히 flutter graphql 클라이언트는 디스크에 캐시 지속성을 가지고 있지 않습니다. 따라서 앱이 시스템 트레이에서 닫히고 다시 열리면 데이터는 여전히 가져와야 합니다. 동일한 기능을 활성화하려면 오프라인 캐시를 활성화해야 합니다: 이동하십시오 [main.dart](https://github.com/templates-back4app/Flutter-GraphQL/blob/772c058c74d870798af1cce7a29a5046f9dda456/lib/main.dart#L32): ```dart 1 return MaterialApp( 2 home: GraphQLProvider( 3 child: CacheProvider( // cache provider widget that provides the offline queries support. 4 child: MyHomePage(), 5 ), 6 client: client, 7 ), 8 ); ``` ## 2: 저장된 환경 설정 설정하기 flutter-graphql 클라이언트를 사용할 때의 한 가지 주의사항은 애플리케이션이 닫힐 때 자체 캐시를 저장하지 않으며, 애플리케이션이 다시 열릴 때 캐시를 복원하지 않는다는 것입니다. 동일한 기능을 구현하기 위해 flutter shared\_preferences 라이브러리를 활용할 것입니다. 이 라이브러리는 간단한 데이터에 대한 플랫폼별 지속 저장소를 래핑합니다 (iOS 및 macOS의 NSUserDefaults, Android의 SharedPreferences 등), 본질적으로 매우 간단한 방식으로 오프라인에서 데이터를 저장할 수 있게 해줍니다. 라이브러리를 설치하려면 [pubspec.yml](https://github.com/templates-back4app/Flutter-GraphQL/blob/772c058c74d870798af1cce7a29a5046f9dda456/pubspec.yaml#L34) 파일에 추가하십시오. :::BlockQuote shared\_preferences: **^**0.5.12**+**4 ::: 다음 내용을 [main.dart](https://github.com/templates-back4app/Flutter-GraphQL/blob/772c058c74d870798af1cce7a29a5046f9dda456/lib/main.dart#L142)에 추가하세요: ```dart 1 import 'package:shared_preferences/shared_preferences.dart'; 2 3 class SharedPreferencesHelper { 4 static final String _offline_cache_key = 'programmingLanguageListResponse'; 5 6 static Future getCache() async { 7 final SharedPreferences prefs = await SharedPreferences.getInstance(); 8 final cache = prefs.getString(_offline_cache_key); 9 final offlineData = 10 cache != null ? programmingLanguageListFromJson(cache) : null; 11 12 return offlineData; 13 } 14 15 static Future setCache(dynamic value) async { 16 final SharedPreferences prefs = await SharedPreferences.getInstance(); 17 18 return prefs.setString(_offline_cache_key, jsonEncode(value)); 19 } 20 } ``` Shared Preferences 라이브러리는 데이터를 키-값 형태로 저장하며, 값은 JSON 문자열로 변환됩니다. 이 데이터를 우리의 데이터 모델로 파싱해야 합니다. ## 3 - 로컬에 저장된 데이터 파싱하기 우리는 `programing_languages_model.dart`. 라는 새로운 파일을 만들 것입니다. 이 파일은 파싱 로직을 저장합니다. 우리는 [https://app.quicktype.io/](https://app.quicktype.io/)에서 JSON을 다트 모델로 변환하는 도구에 우리의 GraphQL 응답을 붙여넣어 이 로직을 생성할 것입니다. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/BFcGNKTus1yY8fHPQUau8_image.png) 생성된 코드를 복사하여 파일을 생성할 것입니다 `programing_languages_model.dart` [https://github.com/templates-back4app/Flutter-GraphQL/blob/flutter-graphql-offline/lib/programing\_languages\_model.dart](https://github.com/templates-back4app/Flutter-GraphQL/blob/flutter-graphql-offline/lib/programing_languages_model.dart) ## 4 - 오프라인 저장소 논리 통합 데이터가 존재하지 않으면 공유 환경 설정에서 데이터를 사용할 것입니다. 데이터가 공유 환경 설정에도 없다면 단순히 로딩 아이콘을 표시할 것입니다. 이제 모든 변경 사항을 통합하기 위해 `_MyHomePageState`의 빌드 메서드에서 변경 사항을 구현할 것입니다. 우리는 `FutureBuilder` 위젯을 사용하여 SharedPreferencesHelper 클래스에서 데이터를 소비할 것입니다. ```dart 1 return FutureBuilder( 2 future: SharedPreferencesHelper.getCache(), 3 builder: (prefs, snapshot) { 4 final offlineData = snapshot.data; 5 if (!snapshot.hasError) { 6 return SafeArea( 7 …. ``` FutureBuilder 위젯을 사용하면 상태를 사용하지 않고도 코드를 작성할 수 있습니다. 공유된 기본 설정에서 데이터를 가져오는 과정은 비교적 빠릅니다. 공유된 기본 설정을 초기화하고 오프라인 저장소에서 데이터를 가져오는 동안 로더를 표시할 수도 있습니다. 이제 이 오프라인 데이터 객체를 사용하여 GraphQL에서 데이터가 사용 가능하지 않을 때 렌더링합니다. 코드를 조금 리팩토링할 것입니다. 다음은 `쿼리`[https://github.com/templates-back4app/Flutter-GraphQL/blob/flutter-graphql-offline/lib/main.dart](https://github.com/templates-back4app/Flutter-GraphQL/blob/flutter-graphql-offline/lib/main.dart) 위젯에 대한 코드가 될 것입니다. ```dart 1 body: Query( 2 options: QueryOptions( 3 documentNode: gql(query), 4 ), 5 builder: ( 6 QueryResult result, { 7 Refetch refetch, 8 FetchMore fetchMore, 9 }) { 10 final data = result.data == null 11 ? offlineData 12 : programmingLanguageListFromJson( 13 jsonEncode(result.data)); 14 if (data == null) { 15 return Center( 16 child: Text( 17 "Loading...", 18 style: TextStyle(fontSize: 20.0), 19 )); 20 } else { 21 SharedPreferencesHelper.setCache(data); 22 return ListView.builder( 23 itemBuilder: (BuildContext context, int index) { 24 if (index == 0) { 25 return Center( 26 child: RaisedButton( 27 onPressed: refetch, 28 child: result.loading == true 29 ? Text("Loading...") 30 : Text("Refetch"), 31 ), 32 ); 33 } 34 return ListTile( 35 title: Text(data.programmingLanguages 36 .edges[index - 1].node.name), 37 trailing: Text(data.programmingLanguages 38 .edges[index - 1].node.stronglyTyped 39 ? "Strongly Typed" 40 : "Weekly Typed"), 41 ); 42 }, 43 itemCount: data.programmingLanguages.edges.length + 1, 44 ); 45 } 46 }, 47 ), 48 ), ``` 다음과 같은 결과를 얻어야 합니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/ZqmUgda8xfGDIT05CbTra_flutter-graphql-offline.gif" size="50" width="240" height="506" position="center" showCaption="false"} ## 결론 이제 우리는 데이터를 오프라인으로 저장하고 애플리케이션이 인터넷에 연결될 때 데이터를 재검증함으로써 매우 좋은 모바일 경험을 보장할 수 있습니다. 또한 사용자 경험을 향상시키는 중요한 측면 중 하나는 flutter-graphql 클라이언트가 이전 응답을 캐시하고 새로운 요청을 자동으로 전송한다는 것입니다. 이로 인해 데이터를 다시 가져오는 동안 번거로운 로딩 화면을 계속 보여줄 필요가 없습니다. 이 기사의 코드는 다음에서 확인할 수 있습니다: [https://github.com/templates-back4app/Flutter-GraphQL/tree/flutter-graphql-offline](https://github.com/templates-back4app/Flutter-GraphQL/tree/flutter-graphql-offline)