Project structure suggestions

[aryaniyaps]

I would like to create custom hooks for queries and mutations in my project, but I'm not sure where to place them. I'm sure that react-query is being used on large scale projects a lot, so this question might have been already solved. Heres what I went through:

hooks/
   usePost.ts

I could store my custom hooks into the hooks directory, but I usually use that to store utilities like stuff for resizing windows. So I'm not sure if data fetching hooks go there.

I dont want to define hooks right above the components they are being used with, because hooks maybe used more than once, and this would cause a mess. Hence I think each hook deserves it's own file.

What seems logical to me is to put queries in a src/queries folder, and mutations in a src/mutations folder.

queries
   usePost.ts
mutations
   useCreatePost.ts

This is what I would do if I'm using apollo + graphql, I think.

How do you structure react query hooks in your projects? I would like to know about it! Any suggestions for where I could put them?

[Brodzko]

We have a /business folder with all business logic separated by area/entity. Note that our API client (domain models and actual data fetching methods) are separate.

Example:

/business/users/index.ts <- export everything else from here so you can import ... from 'business/users'
/business/users/useUsers.ts
/business/users/useCrateUser.ts
...

[TkDodo]

I can also agree that vertical slicing (grouping things by domain like user/product/workspace/...) is usually better than grouping horizontally by type (components/hooks/constants/...)