バックエンドから生成されたswaggerの型に寄せないで、フロントで書いた型とバックエンドの型を緩衝材となるような層を作りたい

public.icon

appRouter

app

ルーティングだけを担当する

feature

ルーティングからきたコンポーネントをレンダリング

component

hooks

type

ここでフロントで描画するための型を配置する

frontendType

viewでレンダリングに必要な型をここから引っ張ってくる

backendType

バックエンドから必要な型をとってくる

adapters

frontendTypeとbackendTypeを繋ぎ込み

code:ts

import { BackendType } from '../types/backendType';

import { FrontendType } from '../types/frontendType';

// viewで使うためのデータに変換するから,返り値がFrontendTypeになる

export const userAdapter = (data: BackendType): FrontendType => {

return {

id: data.id,

name: data.name,

description: data.description,

image: data.image,

link: data.link,

};

};

// こんな感じの関数を書く

でも、frontTypeとbackendTypeの繋ぎ込みはどうやるのか？？

解決済み

orvalで生成したhooksのdataにフロントエンドの型を当てるには？

code:ts

import {

useTechnicalInformationControllerGetAuthorTechnicalInformation,

useTechnicalInformationControllerGetTechnicalInformation,

useTechnicalInformationControllerGetTechnicalInformations,

} from '@/api-client/client/technical-information/technical-information';

import { BackendType } from '../types/backendType';

export const useInfoSearch = () => {

const { data, isLoading, isError } =

useTechnicalInformationControllerGetTechnicalInformations<{

// ここに書けば,dataがその型になる

data: Array<{

id: string;

name: string;

description: string;

image: string;

link: string;

}>;

}>();

console.log(data?.data);

return {

technicalInformationList: data?.data,

isLoading,

isError,

};

};

// こうやってしまうと、API側の型を全て握り潰すので良くないか？？

結局は、API側の型とフロントの方が大幅に異なると、ダメなので、その時は諦めて、フロントエンドの型を諦める

ここに作ってみた

https://gyazo.com/29bcd19855a94ed32dba4632ed25371f

でもこれって、バックエンドがある状態で作ってしまった

よくあるのは、UIを作って、