スクラップテーマ

例えば、下記のようなAPIがあったとする。

type User = {
  email: string
  username: string
  age: number
}

type Response = {
  users: User[]
}

;(async () => {
  await axios.get<Response>('api/v1/users')
})()

上記レスポンスを描画するためのコンポーネントが存在するとする。

export const Users: FC<Props> = (props) => {
  return (
    <ul>
      {props.users.map(user => (
        <li>
          <div>{user.username}</div>
          <div>{user.email}</div>
        </li>
      ))}
    </ul>
  )
}

この時、コンポーネントのPropsの型定義はAPIのレスポンスを参照しておいた方がいいのか、それとも描画側として再度定義しておいた方がいいのか？

hanetsuki 2021/10/11

type Props = {
  users: User[]
}

export const Users: FC<Props> = (props) => {
  return (
    <ul>
      {props.users.map(user => (
        <li>
          <div>{user.username}</div>
          <div>{user.email}</div>
        </li>
      ))}
    </ul>
  )
}

もしAPIに破壊的変更が加わった場合。例えば下記のような変更だ。

//  type User = {
//    email: string
//    username: string
//    age: number
//  }

type User = {
  username: string
  attr: {
    email: string
    age: number
  }
}

この時、描画コンポーネントの変数呼び出しを直す必要が出てくる。

しかし描画側はこの破壊的変更に付き合う必要があるのだろうか？

hanetsuki 2021/10/11に更新

この描画コンポーネントが汎用的に用いられているコンポーネントであある場合、影響範囲が広くなってしまう。

その場合、描画コンポーネント側では描画コンポーネントの定義を作り、propsの内容をラップするのが適切である気がする。

type Props = {
  email: string
  username: string
  age: number
}

export const Users: FC<Props> = (props) => {
  return (
    <ul>
      {props.users.map(user => (
        <li>
          <div>{user.username}</div>
          <div>{user.email}</div>
        </li>
      ))}
    </ul>
  )
}

type User = {
  username: string
  attr: {
    email: string
    age: number
  }
}

type Response = {
  users: User[]
}

;(async () => {
  const res = await axios.get<Response>('api/v1/users')
  const assginedUsers = res.data.users.map(user => ({
    username: user.username,
    email: user.attr.email,
    age: user.attr.age
  }))
})()

型を再定義するのはできるだけ避けたい私だが、情報と描画の型定義に関しては分けて管理した方が良いのでは？と感じました。

まぁAPIの破壊的変更はやめてくれって話なんですけど。

このスクラップは2021/10/12にクローズされました