Lets say i have a form that i use to edit a Customer. In addition to various input fields it will also have multiple drop down lists to set some fields (eg. Country, Category, Status...). Every drop down list will need a seperate lists that i need to get from the backend to populate. That means that if i want to edit a customer with my form, i need to load:
My question is: Should each of these things be loaded seperatly with its own backend API call, or should i write a API backend call that will combine all these things into a single object and use it to load my data?
I think It's better use multiple API call in almost situation. After compare pros and cons as table below, I always choose Multiple API call for projects.
Credit to Andrew Corrigan and Amrit remind me some criterias.
| Single API | Multiple API | |
|---|---|---|
| Network | Less request | Multiple request => Caching |
| UI Render | Render data in nearly same time | Render if any api response |
| Reuse FE component | Need to call big API to take one array data | Get what needed |
| Reusability API | Low | High |
| Single Responsibility | No | Yes |
| Flexible | No | Yes |
Its an opinion based and scenario based , but in my suggestion i would prefer things be loaded separately with its own backend API because :
1.Single api will be heavy and UX will be badly impacted
2.User may not change all field when form opens so only changing fields will be using api