Sign in
Log inSign up

Best way to do double API call?

Deactivated User's photo
Deactivated User
·Jun 14, 2016

I have an interesting problem:

I have my own API that translates text strings. It's a limited database of translation memory, so I also want to do some translating using Google Translate API.

Now in front end, whenever a user clicks an input field (input for translating text) I do an AJAX call to my API and return a list of translation, which are rendered as a select list below the input field.

Now I also want to include Google Translation.

The problem is:

  • I make two requests: one to my translation API, and another one to my API again, which internally makes a request to Google API (my API is proxy). Too many requests for the user to make?
  • It's a nightmare to render. First, I set a loading animation, when the response is returned, I render the first results. Then I have to wait for the Google Translation and append it to the list. It also messes up the whole select logic (the dropdown can be navigated with arrows and mouse). Should I wait for both promises to return before displaying results?
  • I obviously don't want to query my own database and then send a request to Google on the back-end. This wastes too much time. However, it would simplify the rendering logic.

I wrote some semi-simple jQuery modules to make this dropdown. With this double query problem, it may quickly become a mess. So my questions are:

  • How would you solve this double query problem, in a such a way that it doesn't hurt performance too much and the rendering of the results doesn't become complicated?
  • Would you recommend to use a JS component library? This whole thing is used in back-office, so the asset size doesn't matter that much, but still I don't really want some full-blown library like React. The back-office is already a "jungle" of all kinds of jQuery plugins and such.

Thanks

2