reactjs - 带有 React Query 的 CRA React 项目的项目结构

Question

我们从一个使用 CRA 的新 React 项目开始。并且，正计划使用 React Query。
需要有关项目文件夹结构的帮助。具有基于功能的文件夹结构与基于文件类型的结构的任何优势？
此外，仅使用 axios/fetch 调用和直接在组件中创建 useQuery/useMutation Hook 的服务/API 有什么优势吗？与为每个 reactQuery 创建自定义 Hook？

// API call in a service file and using that API call in the component
export const fetchPost = (key, postId) =>
  axios.get(`/api/posts/${postId}`).then((res) => res.data)

//Custom Hooks for each API call in a service 
export default function usePost(postId) {
  return useQuery(postId && ['post', postId], fetchPost)
}

Answer 1

Any advantage of having feature based folder structure vs. file type based structure?

我完全喜欢基于功能的文件夹。他们会将属于您的功能的代码放在功能目录中，并更容易推断特定事物(尤其是查询)的使用位置。大多数查询仅“属于”一个功能 - 如果您需要在多个功能中进行查询，您仍然可以将其移至顶级 queries目录。但只有 queries , utils和 components因为目录使得很难看到在哪里使用了什么。
我可以推荐这篇文章: https://kentcdodds.com/blog/colocation
关于自定义钩子(Hook):创建自定义钩子(Hook)几乎总是好的。我将实际的获取函数保留在查询函数旁边，但没有导出。就像是:

in: 
features
  - posts
    - queries.ts

const fetchPost = () => ...

export const usePost = (id) => useQuery(...)

有了这个:

您可以保留从 ui 中获取的实际数据，但与您的 useQuery 调用位于同一位置。

您可以将一个查询键(以及可能的类型定义)的所有用法保存在一个文件中。

如果您需要调整一些设置或添加一些数据转换，您可以在一个地方完成。