Shared/Common api location ?

[ChambreNoire]

Hello.
Quick question: Where would you put shared react-query wrappers? Say one were to have a modal dialog that is used by multiple features (and therefore lives in /components) and that is responsible for loading something from a server endpoint...
Cheers

[Odas0R]

I would put it under /hooks of the specific feature.

[CodeNameGrant]

@ChambreNoire

Like @Odas0R said, the /hooks directory would work.

I put them in a /api directory to separate api specific hooks from other hooks. Also its adds a bit of consistency, so any react-query wrappers are found in the /api directory regardless of whether its in a feature or not.

[Odas0R]

Yeah, I agree, @CodeNameGrant. I guess I may have misunderstood the question since I've been doing exactly how you said for a couple of months 😆.

[BigSamu]

@CodeNameGrant, @Odas0R,

Can you give a concrete example with this?

What if you have a feature called products where you allocate API custom hooks in the API folder, and then in another feature called requests, you need the APIs from products to create a component there? Let's say a RequestForm.tsx that has as input a combo box field which requires a list of all products in the backend.

In this case, you will need to grab the custom hook useProducts from feature products and use it inside RequestForm.tsx. However, in this case, you will not be following the structure defined by @alan2207 as it is detailed in project-structure.md. There is no isolation between features, because request feature is using logic from products feature.

[BigSamu]

@CodeNameGrant, @Odas0R,

Can you give a concrete example with this?

What if you have a feature called products where you allocate API custom hooks in the API folder, and then in another feature called requests, you need the APIs from products to create a component there? Let's say a RequestForm.tsx that has as input a combo box field which requires a list of all products in the backend.

In this case, you will need to grab the custom hook useProducts from feature products and use it inside RequestForm.tsx. However, in this case, you will not be following the structure defined by @alan2207 as it is detailed in project-structure.md. There is no isolation between features, because request feature is using logic from products feature.

@alan2207 any suggestion on this? I would appreciate your comments.