플러터에서 graphql_flutter 패키지 사용하기[API]

안녕하세요! 오늘은 플러터(Flutter)에서 graphql_flutter 패키지를 사용하여 GraphQL 요청을 처리하는 방법과 몇 가지 유용한 옵션에 대해 알아보겠습니다.

GraphQL은 API 요청을 더 효율적으로 처리할 수 있게 해주는 쿼리 언어입니다.

1. graphql_flutter 패키지 설치하기

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

dependencies:
  flutter:
    sdk: flutter
  graphql_flutter: ^5.0.0

파일을 저장한 후, 터미널에서 flutter pub get 명령어를 실행해 패키지를 설치합니다.

2. 기본 설정하기

graphql_flutter를 사용하려면 GraphQL 클라이언트를 설정해야 합니다. 먼저, 클라이언트를 초기화하는 코드를 작성합니다.

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

void main() async {
  await initHiveForFlutter();

  final HttpLink httpLink = HttpLink(
    'https://api.spacex.land/graphql/', // 예시 URL
  );

  ValueNotifier<GraphQLClient> client = ValueNotifier(
    GraphQLClient(
      link: httpLink,
      cache: GraphQLCache(store: HiveStore()),
    ),
  );

  runApp(MyApp(client: client));
}

class MyApp extends StatelessWidget {
  final ValueNotifier<GraphQLClient> client;

  MyApp({required this.client});

  @override
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: client,
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

이 코드는 HttpLink를 사용하여 GraphQL 서버의 URL을 설정하고, GraphQLClient를 초기화한 후, GraphQLProvider를 사용하여 앱 전체에 클라이언트를 제공합니다.

3. GraphQL 쿼리 보내기

이제 GraphQL 쿼리를 보내는 예제를 보겠습니다. 우리는 SpaceX API를 사용하여 로켓 정보를 가져오는 쿼리를 작성해 보겠습니다.

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

class MyHomePage extends StatelessWidget {
  final String fetchRockets = """
    query {
      rockets {
        id
        name
        description
      }
    }
  """;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GraphQL Flutter'),
      ),
      body: Query(
        options: QueryOptions(
          document: gql(fetchRockets),
        ),
        builder: (QueryResult result, { VoidCallback? refetch, FetchMore? fetchMore }) {
          if (result.hasException) {
            return Text(result.exception.toString());
          }

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

          List rockets = result.data!['rockets'];

          return ListView.builder(
            itemCount: rockets.length,
            itemBuilder: (context, index) {
              final rocket = rockets[index];
              return ListTile(
                title: Text(rocket['name']),
                subtitle: Text(rocket['description']),
              );
            },
          );
        },
      ),
    );
  }
}

이 코드는 Query 위젯을 사용하여 GraphQL 쿼리를 실행하고, 결과를 리스트 형태로 화면에 표시합니다. 쿼리가 로딩 중일 때는 로딩 스피너를, 에러가 발생하면 에러 메시지를, 데이터가 로드되면 데이터를 보여줍니다.

4. GraphQL 변이 보내기

이제 GraphQL 변이(Mutation)를 보내는 예제를 보겠습니다. 우리는 새로운 로켓을 추가하는 변이를 작성해 보겠습니다.

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

class AddRocketPage extends StatelessWidget {
  final String addRocket = """
    mutation(\$name: String!, \$description: String!) {
      insert_rockets(objects: {name: \$name, description: \$description}) {
        returning {
          id
          name
        }
      }
    }
  """;

  @override
  Widget build(BuildContext context) {
    TextEditingController nameController = TextEditingController();
    TextEditingController descriptionController = TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: Text('Add Rocket'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: nameController,
              decoration: InputDecoration(labelText: 'Name'),
            ),
            TextField(
              controller: descriptionController,
              decoration: InputDecoration(labelText: 'Description'),
            ),
            Mutation(
              options: MutationOptions(
                document: gql(addRocket),
                onCompleted: (dynamic resultData) {
                  Navigator.of(context).pop();
                },
              ),
              builder: (RunMutation runMutation, QueryResult? result) {
                return ElevatedButton(
                  onPressed: () {
                    runMutation({
                      'name': nameController.text,
                      'description': descriptionController.text,
                    });
                  },
                  child: Text('Add Rocket'),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

이 코드는 Mutation 위젯을 사용하여 GraphQL 변이를 실행하고, 새로운 로켓을 추가합니다. 사용자가 입력한 데이터를 변이의 인자로 전달합니다.

5. 옵션 설정하기

다양한 옵션을 설정하여 GraphQL 요청을 좀 더 세밀하게 조정할 수 있습니다. 예를 들어, 요청 캐시를 설정할 수 있습니다.

final HttpLink httpLink = HttpLink(
  'https://api.spacex.land/graphql/',
);

final AuthLink authLink = AuthLink(
  getToken: () async => 'Bearer YOUR_PERSONAL_ACCESS_TOKEN',
);

final Link link = authLink.concat(httpLink);

ValueNotifier<GraphQLClient> client = ValueNotifier(
  GraphQLClient(
    link: link,
    cache: GraphQLCache(store: HiveStore()),
  ),
);

이 코드는 AuthLink를 사용하여 인증 토큰을 추가하는 방법을 보여줍니다. 이렇게 하면 인증이 필요한 GraphQL 요청을 보낼 수 있습니다.

마무리

이렇게 해서 플러터에서 graphql_flutter 패키지를 사용하는 방법과 몇 가지 유용한 옵션에 대해 알아보았습니다. graphql_flutter를 사용하면 GraphQL 요청을 매우 간편하게 처리할 수 있습니다.

더 많은 기능과 옵션은 graphql_flutter 공식 문서를 참고하세요.

행복한 코딩 되세요!