Query params in JSON payload

Design
1

Hi All,

Newbie forum user here, also a newbie to ember.

I am designing an ember app that must talk to an API that expects all query parameters to be passed in as a JSON object in the body of the XHR request. It seems that the ember way is to put all of the query params in the URL. These particular parameters are used as filter arguments to a search engine; one of the parameters is the search text itself.

Is it possible to pass parameters in this manner using ember without having to write a bunch of custom serializers and/or adapters? I also want to make sure that Ember Data doesn’t get pushed out of the picture.

Thanks much.

2

Which query params? The application URL or the API endpoint? If you use Ember Data, you can write a simple adapter function to supply the right parameters to the ajax call. If you use a service and GitHub - ember-cli/ember-ajax: Service for making AJAX requests in Ember applications you can easily pass in whatever you need, as well.

3

I’m referring to the query params that are visible in the URL, as supplied by the client. In this example, those params would consist of search terms and additional filtering options that get consumed by the search service that sits behind the API.

To clarify the example, say a user arrives on the search landing page via the ‘/search’ route. There’s an input field for search terms and a couple of checkboxes for applying filtering to the search. When the user hits the submit button, the API expects to receive the search terms and filters as a JSON object in the body of the request, not as parameters in the URL. Ideally, none of those params would be visible in the address bar, and the search results would be loaded into the search results div without performing a reload of the page, in the spirit of SPA design.

The ember-ajax addon looks good, but I want to make sure that I do this the ‘right’ way. Does this type of use case have an accepted/expected solution within the ember ecosystem? Which solution maintains the most benefits of ember and uses the least amount of add-on code?

Thanks for the help.

4

I am not familiar with your project details but I would think: start with ember-ajax calls in your routes, i.e. return that promise from your model(). Let the JSON blob from the response reach a template/component as model where you do your result displaying magic. When the user submits a new search, call a route-action which transitions to this same route with new parameters, which are eventually fed to the model() hook again, which performs a new ajax call and propagates new data down.

If things start to get repetitive and out of control (or involves other models in the app), consider refactoring toward Ember Data.