In my backend (Ruby) I call a translation API, which returns me translated text. I need to then display this translated text when a User clicks on my TranslationButton.vue Component, I don't know to correctly reach into my Backend API via fetch. How does one discover the correct endpoint to use, when we are referring to a backend api call?
Messages.vue
methods {
loadTranslations() {
fetch('#whatgoeshere')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson)
});
},
}
request.rb
def make_request
response = Faraday.post('https://api.deepl.com/v2/translate', auth_key: 'authkeyhere', text: @final_ticket, target_lang: 'DE', source_lang: 'EN')
if response.status == 200
body = response.body
translated_text = body.split('"')[-2]
return translated_text
else
raise InvalidResponseError unless response.success?
end
end
Have a route setup for your make_request method. Then hit that route from your front end.
i.e. fetch("localhost:3000/make_request?maybe_some_query_param=whatever_you_are_translating") and the rest of what you have looks good.