RxJS v5: How to make a POST request with params?

Question

I have some RxJS code and this is part of it:

.mergeMap(action => {
  const user = store.getState().user;
  return ajax.post(`${config.API_BASE_URL}/api/v1/rsvps`, {
    rsvp: {
      meetup_id: action.payload,
      user_id: user.id,
    }
  })
  .map(action => calendarActions.rsvpAdded(action.payload));
})

However, my server is telling me that the params are not in the right format:

[info] POST /api/v1/rsvps
[debug] Processing by ParrotApi.RsvpController.create/2
  Parameters: %{"rsvp" => "[object Object]"}
  Pipelines: [:api_auth]
[info] Sent 400 in 10ms

I tried using JSON.stringify but that didn't work. It just made my params a string.

rsvp: JSON.stringify({
  meetup_id: action.payload,
  user_id: 123,
})

Parameters: %{"rsvp" => "{\"meetup_id\":1,\"user_id\":123}"}

Answer 1

I don't know what parameter format is expected by your server but if you want to send JSON payload you should also include proper headers Content-Type: application/json. With RxJS 5 it's like the following:

ajax.post('url', {param: 42}, { 'Content-Type': 'application/json' });

Now, the body payload is going to be automatically converted to JSON. (See AjaxObservable.ts#L286.

Or if you don't want to send headers you'll need to convert the entire object to JSON yourself:

ajax.post('url', JSON.stringify({param: 42}));

By the way, you definitely don't want to combine these two methods (including the headers and calling JSON.stringify yourself) because this would convert the same payload to JSON twice.