Section16 Optimistic Reponse

Retrofit Patch Method

@PATCH('/basket')
  @Headers({
    'accessToken': 'true',
  })
  Future<List<BasketItemModel>> patchBasket({
    @Body() required PatchBasketBody body,
  });

Path Parameter를 넣을 때 처럼 사용하고자 하는 Body 값을 named 파라미터를 통해 넣어준다. 이 때 named 파라미터 앞에 @Body() 어노테이션을 붙여야 한다.
Retrofit 관련해서는 따로 게시물을 작성해서 정리해 둘 예정!

Optimistic Reponse

Optimistic Reponse(낙천적 응답)는 서버에 요청을 보내거나 시간이 걸리는 작업에서 응답이 긍정적일 것이라는 것을 가정하고 UI를 업데이트 함으로써 UX를 향상시키는 방법을 의미한다.

현재까지는 시간이 걸리는 작업(이하 요청)을 먼저 보내고 응답이 오면 캐시를 업데이트 했었다. 이번 장바구니 기능에서 장바구니에 물품을 추가하는 것에 대한 요청을 서버에 보내고 응답을 기다린 후에 상태를 업데이트하면 await 시간 동안 애플리케이션이 멈춰 있는 듯한 느낌을 사용자가 받게 된다. 사용자는 이 애플리케이션이 느리다고 느낄 수도 있다.

이런 UX를 향상시기키 위해 사용자가 장바구니에 물품을 추가하면 즉시 UI에 그 상태를 반영하고 데이터를 저장 요청을 그 뒤에 보낼 수 있다. 만약 사용자의 행동에 맞춰 상태를 변경했는데 서버 요청에서 에러가 발생해 데이터가 저장이 되지 않았다고 가정하더라도, 사용자는 결제 창에서 한번 더 장바구니 목록을 확인한다. 결제 창에서 사용자가 장바구니를 보았을 때 자신이 생각했던 물품이 장바구니에 없다는 것을 확인할 수 있기 때문에 큰 문제가 아닐 수도 있다.

이러한 Optimistic Reponse를 적용한 장바구니 추가 코드이다.

  Future<void> patchBasket() async {
    await repository.patchBasket(
      body: PatchBasketBody(
        basket: state
            .map(
              (e) => PatchBasketBodyBasket(
                productId: e.product.id,
                count: e.count,
              ),
            )
            .toList(),
      ),
    );
  }

  Future<void> addToBasket({
    required ProductModel product,
  }) async {
    final exists =
        state.firstWhereOrNull((e) => e.product.id == product.id) != null;

    if (exists) {
      state = state
          .map(
            (e) => e.product.id == product.id
                ? e.copyWith(
                    count: e.count + 1,
                  )
                : e,
          )
          .toList();
    } else {
      state = [
        ...state,
        BasketItemModel(
          product: product,
          count: 1,
        ),
      ];
    }

    patchBasket();
  }