More than 1 year has passed since last update.

Vue / TypeScriptでAPIのレスポンスがundifinedで返ってくる

Posted at 2023-09-15

はじめに

フロントエンドでバックエンドを叩く処理を書いていたのですが、うまくいかず時間がかかってしまったので、このような原因もあるよというメモを残していきます

以下のようなコードを書きました

response.ts

export default interfaceApiGlobalIdsResponse {
  apiIds: string[];
}

client.ts

  static findApiGlobalIdByUserId(userId) {
    const apiUrl = `/user/${userId}`
    return ClientUtility.get<ApiGlobalIdResponse>(apiUrl)
  }

ここでgetリクエストを作成しているAPIに対して行いましたが、なぜかデータが取得できませんでした

原因は、クライアントとサーバーでJsonのキー名が一致していなかったことでした

サーバー側では以下のようにapiGlobalIdsという名前で返していますが

fetchApiGlobalIdsResponse.java

import lombok.Data;
import java.util.List;

@Data
public class FetchApiGlobalIdsResponse {
    private final List<String> apiGlobalIds;
}

フロント側ではapiIdsとしていました

response.ts

export default interfaceApiGlobalIdsResponse {
  apiIds: string[];
}

マッピングするときにキー名が違うのでうまくいかずにundifinedになって返ってきていたようです

モックを挟んでいなかったので気づくのが難しかったです
この問題を同じエラーで悩んでいる人に伝えるのにタイトルどうすればいいんだと思いました