Reactアプリにおける DDD と vercel/swr（useSWR）の併用について

Question

DDDアーキテクチャで開発中のReactアプリケーションについて、API取得部分のクライアントライブラリを選定しており、 vercel/swr（useSWR）を一つの候補に上げているのですが、DDDとの親和性が無いのではと思いました。

これはApollo Client など、 Reactのカスタムフックを使っているライブラリ全般に言えることかもしれませんが、どうしてもView層（関数コンポーネント内）に ビジネスロジックが介入するのを防げなくなってしまうのではないかと思いました。

質問ではなく、ご意見募集と言う形になってしまいますが、useSWRやReactアプリにおけるDDDを実装された経験がある方がいらっしゃいましたら、ご意見頂けますと幸いです。

※その他クライアントライブラリでは、axios などを考えています。

---

追記：

DDD前提ではないご意見、（例えば、DDDとuseSWRが併用が難しい場合DDDではなくuseSWRの方がメリットが大きいよ、など） も歓迎ですので、よろしくお願い致します。

Answer 1

ライブラリが提供している低レイヤのHooksを直接コンポーネントで扱うのがアンチパターンなので、Custom Hookを作成してViewからuseSWRなどを隠蔽するのがよいと思います。

コンポーネントからは例えば useUser のようなUserを扱うCustom Hookを使うようにすることでViewへビジネスロジックが表出するのを防げるかと思います。

useSWR とは関係ないですが、空で大雑把にユーザを扱うCustom Hookのイメージを書いてみました。（型定義未チェック、定義してない変数を含め動作確認などをしていないので参考程度にしてください）

const loginInitialState = { userEmail: null } as const

const LoginStateContext = createContext<{
  loginState: { userEmail: string | null }
}>({
  loginState: loginInitialState,
})

const useLoginStateContext = () => useContext(LoginStateContext)

const LoginUpdateContext = createContext<{
  setLoginEmail: (userEmail: string) => void
}>({
  setLoginEmail: () => {},
})

const useLoginUpdateContext = () => useContext(LoginUpdateContext)

const LoginContextProvider = ({ children }: { children: any }) => {
  const [loginState, dispatch] = useReducer(loginReducer, loginInitialState)
  const setLoginEmail = (userEmail: string) => {
    dispatch({ type: "SET_USER_EMAIL", userEmail })
  }

  return (
    <LoginStateContext.Provider value={{ loginState }}>
      <LoginUpdateContext.Provider value={{ setLoginEmail }}>{children}</LoginUpdateContext.Provider>
    </LoginStateContext.Provider>
  )
}

const userInitialState = { user: null } as const

const UserStateContext = createContext<{
  userState: { user: User | null }
}>({
  userState: userInitialState,
})

const useUserStateContext = () => useContext(UserStateContext)

const UserUpdateContext = createContext<{
  setUser: (user: User) => void
}>({
  setUser: () => {},
})

const useUserUpdateContext = () => useContext(UserUpdateContext)

const UserContextProvider = ({ children }: { children: any }) => {
  const [userState, dispatch] = useReducer(userReducer, userInitialState)
  const setUser = (user: User) => {
    dispatch({ type: "SET_USER", user })
  }

  return (
    <UserStateContext.Provider value={{ userState }}>
      <UserUpdateContext.Provider value={{ setUser }}>{children}</UserUpdateContext.Provider>
    </UserStateContext.Provider>
  )
}

const App: FC = () => (
  <LoginContextProvider>
    <UserContextProvider>
      <LoginComponent />
      <UserComponent />
    </UserContextProvider>
  </LoginContextProvider>
)

const useLogin = () => {
  const { setLoginEmail } = useLoginUpdateContext()

  return { setLoginEmail } as const
}

const LoginComponent = () => {
  const { setLoginEmail } = useLogin()
  const handleClick = () => {
    setLoginEmail("[e-mail]")
  }

  return <button onClick={handleClick}>Login</button>
}

const useFetchUser = () => {
  const { userEmail } = useLoginStateContext()
  const { user } = useUserStateContext()
  const { setUser } = useUserUpdateContext()

  useEffect(() => {
    if (userEmail == null) return

    const fetchData = async () => {
      try {
        const result = await fetchUser(userEmail)
        setUser(result.data.user)
      } catch (error) {
        // error
      }
    }

    fetchData()
  }, [userEmail])

  return { user } as const
}

const useUser = () => {
  const { user } = useFetchUser()

  return { user }
}

const UserComponent = () => {
  const { user } = useUser()

  return <div>{user.name}</div>
}

Comments

[tmcafe]

ご回答ありがとうございます！
サンプルまでご丁寧に助かります。

確かにユースケース層を Custom hook を用いて実装すれば、ロジックの分離ができそうですね。