T
TanStack•2y ago
wise-white

Colocation of queries and qpi calls related to components.

wondering if anyone has any thoughts / resources to look over. I have an app that is more or less a dashboard. maybe 20 - 30 components with data that needs to be fetched, some related some not. Currently I have an api folder with an index.ts and queries.ts each with the 20 - 30 respective api calls / react-queries. I am trying to optimize a bit, reducing api code, but also restructing the app to make it a little less cumbersome and more readable. Looking for info on where to place the queries and associated api calls, instead of one huge file. Would you break them up and keep them inside of an api folder still, or go a step further and put them under the component's folder, ie. 
/TopApplicationBar
  |-TopApplicationBar.tsx
  |-TopApplicationBar.module.css
  |-api.ts (in here keep the react-queries and associated api calls
/TopApplicationBar
  |-TopApplicationBar.tsx
  |-TopApplicationBar.module.css
  |-api.ts (in here keep the react-queries and associated api calls
I typically use an api folder an not this ^ but this specifica application keeps growing with more calls and more queries / mutations and scrolling through the monolith index.ts api file / queries.ts file is getting annoying. All of the examples don't really allude to this, and actually I've never professionally worked with a team using react-query until I made my team adopt it this go around. Thanks in advance
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?