Flutter의 GraphQL 사용법

GraphQL은 클라이언트가 필요한 데이터를 정확하게 요청할 수 있게 해주는 데이터 쿼리 언어로, REST API의 대안으로 많이 사용됩니다. Flutter에서 GraphQL을 사용하면 클라이언트와 서버 간의 데이터를 유연하게 주고받을 수 있으며, 불필요한 데이터 전송을 최소화할 수 있습니다. 이번 글에서는 Flutter에서 GraphQL을 통합하여 사용하는 방법을 단계별로 설명하겠습니다.

1. GraphQL이란?

GraphQL은 페이스북에서 개발한 쿼리 언어로, 클라이언트가 필요한 데이터만 선택하여 요청할 수 있습니다. 이는 REST API와 비교하여 더욱 유연한 데이터 요청과 응답이 가능하게 해줍니다.

• REST는 고정된 엔드포인트를 사용하며, 각 엔드포인트는 특정한 리소스를 반환합니다.
• GraphQL은 하나의 엔드포인트에서 필요한 데이터만 쿼리로 지정하여 받을 수 있습니다. 따라서, 과다한 데이터 요청을 줄이고 응답 크기를 줄일 수 있습니다.

2. Flutter에서 GraphQL 사용하기

Flutter에서 GraphQL을 사용하려면 graphql_flutter 패키지를 설치하고, GraphQL 클라이언트를 구성하여 서버와 데이터를 주고받을 수 있습니다.

2.1 GraphQL 패키지 설치

먼저, graphql_flutter 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  graphql_flutter: ^5.0.0

그리고 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

2.2 GraphQL 클라이언트 설정

GraphQL을 사용하려면 먼저 GraphQL 서버와 통신할 클라이언트를 설정해야 합니다. 이를 위해 graphql_flutter 패키지의 GraphQLClient 클래스를 사용합니다.

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

void main() async {
  await initHiveForFlutter();  // 캐시 관리를 위해 Hive 초기화
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final HttpLink httpLink = HttpLink('https://graphql-pokemon2.vercel.app/');  // GraphQL API 엔드포인트

    ValueNotifier client = ValueNotifier(
      GraphQLClient(
        link: httpLink,
        cache: GraphQLCache(store: HiveStore()),  // 캐시를 위한 설정
      ),
    );

    return GraphQLProvider(
      client: client,
      child: MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

위 코드에서는 GraphQLClient를 설정하고, GraphQLProvider로 클라이언트를 앱에 주입했습니다. HttpLink를 사용하여 GraphQL API의 엔드포인트를 지정하고, 캐시 관리를 위해 Hive를 초기화했습니다.

 

 

728x90

 

3. GraphQL 쿼리(Query) 실행

GraphQL 쿼리는 데이터를 가져오는 요청을 의미합니다. 클라이언트에서 필요한 데이터를 쿼리로 지정하고, 서버에서 해당 데이터를 응답받는 방식입니다.

3.1 간단한 GraphQL 쿼리 예제

다음은 포켓몬 정보를 가져오는 간단한 GraphQL 쿼리입니다.

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String fetchPokemon = """
      query {
        pokemon(name: "Pikachu") {
          id
          name
          weight {
            minimum
            maximum
          }
          height {
            minimum
            maximum
          }
          types
        }
      }
    """;

    return Scaffold(
      appBar: AppBar(
        title: Text('GraphQL Query Example'),
      ),
      body: Query(
        options: QueryOptions(
          document: gql(fetchPokemon),  // GraphQL 쿼리 설정
        ),
        builder: (QueryResult result, {VoidCallback? refetch, FetchMore? fetchMore}) {
          if (result.hasException) {
            return Text(result.exception.toString());
          }

          if (result.isLoading) {
            return Center(child: CircularProgressIndicator());
          }

          // 서버에서 가져온 데이터 표시
          final pokemon = result.data!['pokemon'];
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Name: ${pokemon['name']}'),
              Text('Type: ${pokemon['types'].join(', ')}'),
              Text('Height: ${pokemon['height']['minimum']} - ${pokemon['height']['maximum']}'),
              Text('Weight: ${pokemon['weight']['minimum']} - ${pokemon['weight']['maximum']}'),
            ],
          );
        },
      ),
    );
  }
}

위 코드에서는 Pikachu의 정보를 가져오는 GraphQL 쿼리를 실행하고, 결과를 화면에 표시하는 예제입니다.

• Query 위젯: graphql_flutter 패키지에서 제공하는 Query 위젯을 사용하여 쿼리를 실행하고, 응답 데이터를 처리합니다.
• QueryOptions: document 필드에 GraphQL 쿼리를 전달합니다.
• QueryResult: 서버에서 받은 결과는 result 객체에 저장되며, 이를 통해 데이터나 예외를 처리할 수 있습니다.

4. GraphQL 변형(Mutation) 실행

GraphQL 변형(Mutation)은 서버에 데이터를 전송하여 추가, 수정, 삭제 작업을 처리하는 요청입니다. Flutter에서 GraphQL 변형을 사용해 서버에 데이터를 전송하는 방법을 살펴보겠습니다.

4.1 간단한 GraphQL 변형 예제

다음 예제에서는 새로운 포켓몬을 추가하는 Mutation을 실행합니다.

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

class MutationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String addPokemon = """
      mutation CreatePokemon(\$name: String!, \$type: String!) {
        createPokemon(input: {name: \$name, type: \$type}) {
          name
          types
        }
      }
    """;

    return Scaffold(
      appBar: AppBar(
        title: Text('GraphQL Mutation Example'),
      ),
      body: Mutation(
        options: MutationOptions(
          document: gql(addPokemon),
        ),
        builder: (RunMutation runMutation, QueryResult? result) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                decoration: InputDecoration(labelText: 'Pokemon Name'),
                onSubmitted: (name) {
                  runMutation({'name': name, 'type': 'Electric'});
                },
              ),
              SizedBox(height: 20),
              if (result?.isLoading ?? false)
                CircularProgressIndicator()
              else if (result?.hasException ?? false)
                Text('Error: ${result!.exception.toString()}')
              else if (result?.data != null)
                Text('Added: ${result!.data!['createPokemon']['name']}'),
            ],
          );
        },
      ),
    );
  }
}

위 예제에서는 새로운 포켓몬을 추가하는 GraphQL 변형을 사용하여 데이터를 서버로 전송합니다.

• Mutation 위젯: Mutation 위젯은 변형 요청을 처리합니다.
• RunMutation: 사용자가 데이터를 입력하면 runMutation을 호출하여 서버로 데이터를 전송합니다.
• QueryResult: 결과 데이터를 받아 처리하거나, 오류 발생 시 처리합니다.

 

반응형

 

5. GraphQL Subscription 사용

GraphQL Subscription은 실시간 데이터를 수신하는 데 사용됩니다. 예를 들어, 채팅 애플리케이션에서 새 메시지가 들어오면 이를 실시간으로 클라이언트에 전송할 때 사용됩니다.

5.1 간단한 GraphQL Subscription 예제

다음은 실시간 메시지를 수신하는 Subscription 예제입니다.

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

class SubscriptionScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String newMessageSubscription = """
      subscription {
        newMessage {
          id
          content
          sender
        }
      }
    """;

    return Scaffold(
      appBar: AppBar(
        title: Text('GraphQL Subscription Example'),
      ),
      body: Subscription(
        options: SubscriptionOptions(
          document: gql(newMessageSubscription),
        ),
        builder: (QueryResult result) {
          if (result.hasException) {
            return Text('Error: ${result.exception.toString()}');
          }

          if (result.isLoading) {
            return Center(child: CircularProgressIndicator());
          }

          // 서버에서 실시간 메시지를 수신하여 표시
          final message = result.data!['newMessage'];
          return ListTile(
            title: Text('From: ${message['sender']}'),
            subtitle: Text('Message: ${message['content']}'),
          );
        },
      ),
    );
  }
}

위 예제는 새로운 메시지를 실시간으로 수신하는 GraphQL Subscription 예제입니다.

• Subscription 위젯: 실시간 데이터를 구독하여 서버에서 데이터

가 들어올 때마다 UI를 업데이트합니다.

• SubscriptionOptions: Subscription 요청을 설정하고, 응답 데이터를 처리합니다.

6. 캐시 및 상태 관리

GraphQL 클라이언트는 데이터 캐싱을 통해 네트워크 요청을 최적화할 수 있습니다. graphql_flutter에서는 GraphQLCache와 HiveStore를 사용하여 데이터 캐싱을 관리할 수 있습니다. 캐시를 사용하면 불필요한 네트워크 요청을 줄이고, 성능을 향상시킬 수 있습니다.

6.1 캐시 사용 예제

GraphQLClient(
  link: httpLink,
  cache: GraphQLCache(store: HiveStore()),  // HiveStore를 통한 캐싱 설정
);

위 예제는 데이터를 캐싱하여, 동일한 요청을 반복하지 않고 캐시된 데이터를 사용할 수 있도록 설정한 코드입니다.

결론

Flutter에서 GraphQL을 사용하는 것은 매우 강력한 기능을 제공하며, REST API보다 유연한 데이터 요청 및 응답이 가능합니다. graphql_flutter 패키지를 통해 쉽게 GraphQL 클라이언트를 설정하고, 쿼리(Query), 변형(Mutation), 구독(Subscription)을 구현할 수 있습니다. 또한, 캐싱을 활용하여 성능을 최적화할 수 있습니다. 이번 글에서 설명한 방법을 활용하여 Flutter 애플리케이션에서 GraphQL을 통합해보세요. GraphQL을 통해 더욱 효율적인 데이터 관리를 구현할 수 있습니다.