Fetching data in steps based on certain conditions

Hey,

I’d like to hear other’s opinions on how they would solve a similar issue.

The whole app is written in vue.js and php, but that’s not very important.

When you click on a tab (“category”) , the inputs or/and selects have to be hidden/shown accordingly.
Since many fields are shared between the categories, I found it logical to have them in one place.
I need to know which category is selected to be able to show typ (type).
Dekor (decor) has to be updated whenever type is changed.
Category “venkovni parapety” and type “hlinikove tazene” in decor “zakazkova RAL” have an extra select called “RAL”.
A similar exception is when a user clicks on tab “doplnky” and chooses type “ostatni”.

I watch certain props and whenever they change, an XHR request is send, which returns a JSON response with all the necessary data for a particular category.

The problem is that this is quite inefficient as a bunch of requests are always fired.
Not to mention, that some of the requests may be delayed or in the “wrong” order, and thus cause bugs.

How do you solve similar issues? Any feedback is highly appreciated!




Well, what you want is a bunch of little steps, right? The other alternative is to make one huge, monster request with everything? I think it’s better to make a bunch of small ones. And you can cache the results so if you need the same info again you can get it without a request.

Yes, indeed!
Right now, I send all data in both requests and responses, but as it’s an internal app, the speed or amount of transferred data is not a huge deal.
Thanks for your feedback!