[Flutter] graphQL 사용하기

saewoohan·2024년 4월 28일
fluttergraphqlpub.dev
1

Flutter

목록 보기
11/12
post-thumbnail

1. 라이브러리

  • flutter에서 사용할 수 있는 graphql 라이브러리는 크게 두가지가 있다.
    1.graphql_flutter
    2.graphql
  • 두 라이브러리 모두 GraphQLClient를 통해 link들을 구성하고, 네트워킹 상호작용 하는 방식은 동일하다
  • 위의 사진은 gql_link를 도식화 한 그림인데, 나도 모든 link에 대해서는 사용해보지는 않았고, token을 전달하는 AuthLink, Http 통신을 로깅하기 위해서 HttpLink, 소켓 사용 시에 필요한 WsLink정도만 사용해보았다.
  • 나는 graphQLClient를 provider를 통해 전역적으로 관리하고 필요하는 부분에서 해당 provider를 참조하는 형식으로 사용하였다.
final graphQLClientProvider = Provider<GraphQLClient>((ref) {
  /**
   * link를 하는 순서 중요
   */
  final HttpLink httpLink = HttpLink(dotenv.env['SERVER_URL'] ?? "",
      httpClient: LoggerHttpClient(http.Client()));

  final WebSocketLink webSocketLink = WebSocketLink(
    dotenv.env['WEBSOCKET_URL'] ?? "",
    config: SocketClientConfig(
      autoReconnect: true,
      delayBetweenReconnectionAttempts: const Duration(milliseconds: 100),
      initialPayload: () async {
        final String idToken = await getIdToken();
        return {
          "Authorization": "Bearer $idToken",
        };
      },
    ),
    subProtocol: GraphQLProtocol.graphqlTransportWs,
  );

  final AuthLink authLink = AuthLink(
    getToken: () async {
      try {
        String idToken = await getIdToken();

        AppLogger.info("Bearer $idToken");
        return 'Bearer $idToken';
      } catch (e) {
        AppLogger.debug(e.toString());
      }
      return null;
    },
  );

  Link link = authLink.concat(httpLink);
  link = Link.split(
    (request) => request.isSubscription,
    webSocketLink,
    link,
  );

  return GraphQLClient(
    cache: GraphQLCache(store: HiveStore()),
    link: link,
  
  );
});

class LoggerHttpClient extends BaseClient {
  LoggerHttpClient(this._client);

  final Client _client;
  final JsonEncoder _encoder = const JsonEncoder.withIndent('  ');
  final JsonDecoder _decoder = const JsonDecoder();

  @override
  void close() {
    _client.close();
  }

  @override
  Future<StreamedResponse> send(BaseRequest request) {
    return _client.send(request).then((StreamedResponse response) async {
      final String responseString = await response.stream.bytesToString();
      AppLogger.info('''
=> request: ${response.request.toString()},
=> headers: ${_encoder.convert(response.headers)},
<- statusCode: ${response.statusCode},
<- responseString: ${_encoder.convert(_decoder.convert(responseString))},
     ''');
      return StreamedResponse(
        ByteStream.fromBytes(utf8.encode(responseString)),
        response.statusCode,
        headers: response.headers,
        reasonPhrase: response.reasonPhrase,
        persistentConnection: response.persistentConnection,
        contentLength: response.contentLength,
        isRedirect: response.isRedirect,
        request: response.request,
      );
    });
  }
}
  • Flutter Inspector를 통해서 Network의 상호작용을 확인 할 수 있지만, 나는 개인적으로 기본적인 상호작용은 print를 해서 debug console에 즉각적으로 나오는 것이 작업하기 편했다. 그래서 위와 같은 custom logger link를 만들어서 사용하였다.
  • graphql을 조금이나마 사용하면서 느낀 점은, link의 근본적인 이해를 해야 로깅이나 토큰 리프레시 같은 로직이 쉬워지는 것 같다. 그래서 이 부분은 조금 더 공부 한 후 포스팅 하려고 한다.
  • 이번 포스팅에서는 flutter에서 주로 사용하는 graphql의 라이브러리 두 가지를 분석하고, 어떤 차이점이 있는지 얘기해보려고 한다.
  • 추가적으로 나는 grphql 라이브러리를 사용하는데 왜 해당 라이브러리를 선택하게 되었는지에 대해서도 공유하려고 한다.

1) graphql_flutter

  • graphql flutter를 검색했을때 가장 많은 레퍼런스가 존재하는 라이브러리이다.
  • 가장 큰 특징은 위젯에 바인딩 되는 Query, Mutation, Subscription이다. (여기서 각각의 용어가 생소하다면 단순하게 설명하자면 다음과 같다.)

1. GET - QUERY
2. DELETE - MUTATION
3. POST - MUTATION
4. PUT - MUTATION
5. SOCKET - SUBSCRIPTION

a. Query

String readRepositories = """
  query ReadRepositories(\$nRepositories: Int!) {
    viewer {
      repositories(last: \$nRepositories) {
        nodes {
          id
          name
          viewerHasStarred
        }
      }
    }
  }
""";
  • 간단한 예시를 통해 설명을 하자면, 위와 같은 query documentation이 존재한다고 하자. 그러면 실제 Query를 수행하는 곳에서는 다음과 같이 Widget형태로 사용한다.
// ...
Query(
  options: QueryOptions(
    document: gql(readRepositories), // this is the query string you just created
    variables: {
      'nRepositories': 50,
    },
    pollInterval: const Duration(seconds: 10),
  ),
  // Just like in apollo refetch() could be used to manually trigger a refetch
  // while fetchMore() can be used for pagination purpose
  builder: (QueryResult result, { VoidCallback? refetch, FetchMore? fetchMore }) {
    if (result.hasException) {
        return Text(result.exception.toString());
    }

    if (result.isLoading) {
      return const Text('Loading');
    }

    List? repositories = result.data?['viewer']?['repositories']?['nodes'];

    if (repositories == null) {
      return const Text('No repositories');
    }

    return ListView.builder(
      itemCount: repositories.length,
      itemBuilder: (context, index) {
        final repository = repositories[index];

        return Text(repository['name'] ?? '');
    });
  },
);
// ...
  • 이와 같이 보여주려는 스크린의 Widget에 Query Widget을 한번 감싸주는 형태이다. 이와 같은 형태의 가장 큰 특징은 Widget이 마운트 될때, Query도 바로 호출된다는 사실이다. 마치 React에서 useQuery와 같은 훅이다. (실제로 flutter hooks로 이 형태를 사용한다면 useQuery 훅이다.)

b. Mutation

  • Mutation도 Query와 같이 documentation을 선언해 준다.
String addStar = """
  mutation AddStar(\$starrableId: ID!) {
    addStar(input: {starrableId: \$starrableId}) {
      starrable {
        viewerHasStarred
      }
    }
  }
""";
  • 후에 Mutation Widget을 통해 Mutation을 수행한다.
...

Mutation(
  options: MutationOptions(
    document: gql(addStar), // this is the mutation string you just created
    // you can update the cache based on results
    update: (GraphQLDataProxy cache, QueryResult result) {
      return cache;
    },
    // or do something with the result.data on completion
    onCompleted: (dynamic resultData) {
      print(resultData);
    },
  ),
  builder: (
    RunMutation runMutation,
    QueryResult result,
  ) {
    return FloatingActionButton(
      onPressed: () => runMutation({
        'starrableId': <A_STARTABLE_REPOSITORY_ID>,
      }),
      tooltip: 'Star',
      child: Icon(Icons.star),
    );
  },
);

...

c. Subscription

final subscriptionDocument = gql(
  r'''
    subscription reviewAdded {
      reviewAdded {
        stars, commentary, episode
      }
    }
  ''',
);

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Subscription(
          options: SubscriptionOptions(
            document: subscriptionDocument,
          ),
          builder: (result) {
            if (result.hasException) {
              return Text(result.exception.toString());
            }

            if (result.isLoading) {
              return Center(
                child: const CircularProgressIndicator(),
              );
            }
            // ResultAccumulator is a provided helper widget for collating subscription results.
            // careful though! It is stateful and will discard your results if the state is disposed
            return ResultAccumulator.appendUniqueEntries(
              latest: result.data,
              builder: (context, {results}) => DisplayReviews(
                reviews: results.reversed.toList(),
              ),
            );
          }
        ),
      )
    );
  }
}
  • 다음과 같이 WS의 stream을 구독하고, data를 사용한다.

d. 총평

  • 개인적으로 해당 라이브러리의 문서를 읽으며 느낀 부분은 Widget에다 Query, Mutation, Subscription 위젯을 감싼다는 것, 그리고 Widget Tree의 구성에 포함된다는 사실이 직관적이지 않았다. (실제로 Inspector tree에는 존재하지 않을 수 있지만, 시각적인 구성에 포함된다는 부분이 직관적이지 않았다.)
  • 만약 어떤 스크린의 절반을 경계로 위쪽 리스트, 아래쪽 리스트가 필요하다면, 각각 Query Widget으로 감싸서 각각 위젯을 위해서만 Query를 사용한다는 느낌을 보여주었다. (사실 의미는 맞긴 하지만 익숙하지 않은 형태였다.)
  • Lazy하게 query와 mutation을 사용하려면 Widget을 조건부 렌더링 해줘야 가능하다는 것 등이 매력적이지가 않았다.
  • 이를 타개하기 위해서 flutter hooks라이브러리를 통해 정말 react와 유사하게(라이브러리 자체가 flutter를 hooks기반으로 동작하게 하려는 것이 목적이기에( useQuery, useMutation과 같은 훅을 사용해서 graphql을 사용 할 수 있는 방법이 존재하고 라이브러리에서도 소개를 해주고 있다.
  • 프로젝트를 시작할 때, 학습의 목적도 어느정도 있어 리엑트는 경험이 있기에 조금 더 Native flutter에 가깝게 사용하고 싶었다. 그렇기 때문에, 종합적으로 graphql_flutter는 그다지 매력적이여 보이지 않았다.

2) grphql

  • graphql은 function기반으로 동작한다. 즉 조금 더 lazy하게 사용할 수 있는 옵션을 제공한다.
  • function기반으로 lazy로 동작하는 것과, widget에 binding되어 위젯 생명주기에 따라 네트워크 로직이 동작하는 방식 중에 나는 lazy하게 동작하는 방식이 익숙해서 graphql이 조금 더 사용하기 편하다고 생각하였다.
  • 가장 큰 이유라고 하면 viewModel - useCase (Repository) - dataSource 로 이어지는 Repository Pattern이 익숙해서 lazy한 옵션이 끌렸다고 볼 수 있다.

a. Query

  • graphql 라이브러리도 마찬가지로 documentation을 작성해준다.
const String readRepositories = r'''
  query ReadRepositories($nRepositories: Int!) {
    viewer {
      repositories(last: $nRepositories) {
        nodes {
          __typename
          id
          name
          viewerHasStarred
        }
      }
    }
  }
''';
  • 그 후에 다음 코드와 같이 query function을 호출해주면 된다.
// ...


const int nRepositories = 50;

final QueryOptions options = QueryOptions(
  document: gql(readRepositories),
  variables: <String, dynamic>{
    'nRepositories': nRepositories,
  },
);

final QueryResult result = await client.query(options);

if (result.hasException) {
  print(result.exception.toString());
}

final List<dynamic> repositories =
    result.data['viewer']['repositories']['nodes'] as List<dynamic>;

// ...
  • 조금 더 viewModel - useCase - dataSource로 이어지는 아키텍처를 강하게 사용하고 싶다면 이와 같이 네트워크 호출 로직을 useCase에서 관리하는 측면이 좋다고 생각하였다.

b. Mutation

const String addStar = r'''
  mutation AddStar($starrableId: ID!) {
    action: addStar(input: {starrableId: $starrableId}) {
      starrable {
        viewerHasStarred
      }
    }
  }
''';
  • mutation도 거의 차이가 없다.
// ...

final MutationOptions options = MutationOptions(
  document: gql(addStar),
  variables: <String, dynamic>{
    'starrableId': repositoryID,
  },
);

final QueryResult result = await client.mutate(options);

if (result.hasException) {
  print(result.exception.toString());
  return;
}

final bool isStarred =
    result.data['action']['starrable']['viewerHasStarred'] as bool;

if (isStarred) {
  print('Thanks for your star!');
  return;
}

// ...
  • graphql_flutter 라이브러리도 mutation은 동작 원리 때문에 당연하게 lazy하게 사용은 하지만, graphql 라이브러리는 위젯에 바인딩 되지 않고, 함수로써 호출 된다는 큰 차이점이 있다.

c. Subscription

final subscriptionDocument = gql(
  r'''
    subscription reviewAdded {
      reviewAdded {
        stars, commentary, episode
      }
    }
  ''',
);
// graphql/client.dart usage
subscription = client.subscribe(
  SubscriptionOptions(
    document: subscriptionDocument
  ),
);
subscription.listen(reactToAddedReview)
  • subscription은 webSocket처럼 subscriptionDocument를 통해서 socket을 연결 한 후 연결된 소켓에서 오는 data를 listen해서 사용하면 된다.
  • 이렇게만 본다면 기존 웹소켓과 큰 차이가 없어 보이지만, subscription은 listen만 가능하다는 점 (emit이 없음)이 가장 큰 차이점이다..
  • 실제로 송수신(채팅)같은 실시간 서비스를 제공하려면 mutation과 subscription을 사용하여야 한다.

d. 총평

  • graphql_flutter라이브러리와 graphql라이브러리의 가장 큰 차이점이라고 한다면, 위젯에 바인딩 되는지의 여부. 그리고 lazy하게 호출 할 수 있는 지의 여부이다.
  • 나는 그 중에서도 네트워크 로직의 분리를 위해서 (useCase와 dataSource로 이어지는 아키텍처) 조금 더 lazy하게 호출 할 수 있는 옵션을 선택하였고, 확실히 각 담당 영역의 역할 구분은 확실히 되었다.
  • 한 가지 아쉬운 점이 있다면, graphql_flutter라이브러리에 lazy한 옵션이 있으면 더 좋을 것 같다. 아니면 flutter hooks라이브러리에 useLazyQuery같은 옵션이 있다면 더 좋을 것 같다.
  • 사실 상 가장 현명한 선택는 두 라이브러리를 모두 사용하고, 선택적으로 적재적소에 쿼리와 뮤테이션을 사용하는 것인데 나는 뭔가 통일된 느낌을 조금 더 선호해서 graphql라이브러리로 통합했었던것 같다.
  • 돌이켜 코드를 회고해보면, 생각한 만큼 깔끔하게 구조가 정리되지는 않은 것 같고, 차라리 hooks기반으로 flutter hooks를 적극적으로 사용했으면 어땠을까 라는 생각이 든다.

2. 마무리

  • flutter에서 graphql을 사용하는 레퍼런스가 조금 적은 것 같다는 생각이 들었다.
  • 나는 Query, Mutation 위젯을 사용하는 것이 어색하고 조금 보기에 안이뻐보였는데, 많은 레퍼런스와 코드들이 위젯 바인딩 형식으로 사용되고 있었다. (flutter hooks로 사용된 코드는 거의 못봤다.)
  • 또한, response와 variable(request)를 재사용하기가 쉽지 않았다.
    typing이 쉽지 않다 보니(class로 직접 일일히 만들어줘야하는데, variable에 바로 할당이 어려움) 이런 문제가 생긴 것 같다.
  • 그래서 다른 좋은 옵션이 없을까 찾는 와중 codegen을 많이 사용한다는 것을 보고 codegen을 사용해보니 정말 신세계를 경험했다는 느낌이 들었다. (코드양은 조금 많아지는 것 같지만.. 어차피 번들링하면 줄어들 친구들이라 괜찮을거라는 생각이 들었다.)
  • graphql을 사용하면 꼭은 아니지만 써서 안좋을 건 없다는 생각이 들었고, 작은 규모의 프로젝트일수록 적극적으로 사용하는 것이 좋다는 생각이 들었다. 개발 속도 상승 대비 리스크가 굉장히 적다.
  • 다음 포스팅은 그래서 codegen에 대해서 얘기해보려고 한다.
profile
saewoohan
이전 포스트

[Flutter] Riverpod (ViewModel)

다음 포스트

[Flutter] graphQL codegen에 대해서

0개의 댓글