Separating Backend Calls

Hi everyone, it's Ked. I'd like to share a quick folder structure tip that I've consistently observed in top-quality repositories during my contributions to open source projects: separating backend calls from front end components.

Imagine you have a Home Page component that needs to fetch user data from a data base:

This approach works, but as the application grows, managing these calls within components becomes exhausting. In addition, if you have multiple locations that use the same API call, you may be writing the same fetch function over and over. The solution is to extract these calls into a dedicated API service module. This way you can just call upon this module in any component that needs it. Write once, call indefinitely:?

Now you can call that function and add it to your frontend code:

Conclusion

Adopting a pattern where functions for API interactions are placed in a service module offers several advantages. Reusability is simplified as these functions can be shared across various components. It also improves maintainability, as centralizing API calls makes it easier to manage modifications and make error handling much easier. For testing, having independent API services simplifies the process of mocking and testing these functions. Furthermore, this approach improved readability by keeping component logic more focused and easier to read. Overall, this organizational strategy leads to the development of more maintainable, scalable, and well-structured applications.