如何将关注点与反应查询结合使用（在干净的架构环境中）

Question

我目前正在考虑满足我的专业项目需求的完美架构。我读了很多关于（干净）架构的文章，我认为我希望用 React 管理的 UI 与将由“应用程序管理器”管理的应用程序业务逻辑完全分开。问题是我希望“应用程序管理器”配置并触发突变（我认为获取查询可以在组件中使用，没有任何问题）。但由于react-query要求它通过使用hooks位于React组件中，所以我认为这是不可能的。

我错了 ？

是否存在解决方法？

也许您有一个可以更好管理的图书馆？我正在考虑 RTK 查询也许......

Answer 1

我在很长一段时间里都是 RQ 的重度用户，由于架构问题永远不可能有客观正确的答案，所以我可以展示我个人所做的事情。

首先，我按域将所有查询和组件提取到 API 模块中，给定一个包含帖子、作者和评论的简单应用程序，我将拥有包含这些导出的文件：

// apis/posts.js
export function useGetPosts() {}
export function useGetPost(postId) {}
export function usePutPost() {}
export function usePostPost() {}
export function useDeletePost() {}

// apis/comments.js
export function useGetComments(postId) {}
export function useGetComment(commentId) {}
export function usePutComment() {}
export function usePostComment() {}
export function useDeleteComment() {}

// apis/authors.js
export function useGetAuthors() {}
export function useGetAuthor(authorId) {}
export function usePutAuthor() {}
export function usePostAuthor() {}
export function useDeleteAuthor() {}

这些模块中的每一个都将在内部处理作为一个整体工作所需的一切，比如useDeleteAuthor进行突变并在成功时修改缓存，或者可能实现乐观更新。

每个都有一个查询键系统，以便消费者（您的组件）不必了解它们。

function MyComponent() {
  const posts = useGetPosts()
}

function MyOtherComponent() {
  const deletePost = useDeletePost()
}

尝试使 API 尽可能完整，但也不要忘记突变可以，例如，在调用站点上接受回调：

deletePost.mutate(payload, {
  onMutate: () => setState(false)
})

假设您可以使用它来在删除之前关闭确认模式。像这样的东西不属于 API 模块，所以我们只是将它作为突变的本地回调提供。

如上所述，没有正确答案。肯定有一个论点认为以相反的方式进行操作并更多地使用搭配，将查询放在您正在使用它们的组件旁边。但如果你想要分离，我认为这将是一个开始的地方。

正如 Ben 在对你的问题的评论中所写的那样，RQ 只是钩子，所以我同意尝试将其放在“react 之外”是没有意义的。