Chopperを用いたAPI通信

環境

Flutter3.0.3
chopper: 4.0.4

Client

まずはClient部分の実装になります

class AppChopper {

  static ChopperClient create(Ref ref, [String? baseURL]) {
    return ChopperClient(
        baseUrl: baseURL ?? ApiConfig.baseURL,
        converter: const JsonConverter(),
        interceptors: [
          (Request request) => applyHeaders(
                request,
                {
                  'authorization': 'Authorizeを記入',
                },
              ),
          (Request request) async {
            Logger.info(
                '${request.method}: ${request.baseUrl}${request.url}\nbody: ${request.body}');
            return request;
          }
        ]);
  }
}

生成する際に interceptors に applyHeaders や request.copyWith を使うことによってClient作成時に含めたいHeaderやQueryを含めておくことができます。
APIリクエスト時に実行したいものの実行をすることも可能です。
今回ではリクエストしたAPIのフルパスをログに出す処理を書いています

APIリクエスト処理

@Get(path: '/get/')
Future<Response> get({
  @Query('id') required String id,
});

@Post(path: '/post/')
Future<Response> post({
  @Body() required Map<String, dynamic> body,
});

@Put(path: '/put/')
Future<Response> put({
  @Body() required Map<String, String> body,
});

Chopperを用いた関数の場合は返り値がResponseになります。
以上のように関数を作成後以下のコマンドを実行してファイルを生成します

flutter pub run build_runner build --delete-conflicting-outputs

生成に問題がなければ実際に関数を実行することによってAPIリクエストができるようになります。

パスに動的な値を入れたい場合

@Get(path: '/get/{blogId}/')
Future<Response> get({
  @Path('blogId') required String blogId,
});

pathに含める変数を {} で囲み、@Pathに含める名前を同じにしてあげればリクエストできるようになります。

最後に

エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。募集にはありませんが、長期インターンも歓迎していますので、興味があれば連絡いただければと思います。

カジュアル面談はこちらになります！ meety.net

募集職種一覧はこちらになります！(カジュアルからもOK) www.wantedly.com