Ember.js: Correct Query String Serialization and Deserialization

Created on 31 Aug 2016 · 14Comments · Source: emberjs/ember.js

This bug supersedes #13816 and #14171 (and who knows how many others). The behavior for serializing objects to query strings inside of Ember is wrong for at least two reasons:

It is inconsistent with literally every other implementation I've reviewed (~20 at this point).
It does not match the behavior of route-recognizer, which we also bundle.

This means that our behavior does not work on hard refresh and also triggers strange serialization inconsistencies when run through a string or object path. I'm writing a full blog post about query strings which will be published this week which will detail a path forward.

I'm of the opinion that we should not attempt patches to this behavior without solving the underlying problem as we will simply introduce new and different failure modes. Until we have a complete solution (which I'll write as part of landing the new route-recognizer) we should ride out our existing known behavior and new reports should be closed as a duplicate of this bug.

Bug

Source

nathanhammond

👍11

Most helpful comment

I'm just using this mixin now...

import Mixin from '@ember/object/mixin';
import { typeOf } from '@ember/utils';

function basicArray(array) {
  if (typeOf(array) !== 'array') {
    return false;
  }

  return array.every((value) => {
    return ['string', 'number'].includes(typeOf(value));
  });
}

export default Mixin.create({
  serializeQueryParam(value, urlKey, defaultValueType) {
    if (defaultValueType === 'array' && basicArray(value)) {
      return value.slice();
    }

    return this._super(value, urlKey, defaultValueType);
  },
  deserializeQueryParam(value, urlKey, defaultValueType) {
    if (defaultValueType === 'array' && basicArray(value)) {
      return value.slice();
    }

    return this._super(value, urlKey, defaultValueType);
  },
});

robclancy on 30 Apr 2018

👍11

All 14 comments

@nathanhammond sounds like you have a plan forward for the solution as part of the route-recognizer work, nice. Will you post that write up as an RFC?

pixelhandler on 10 Sep 2016

👍1

@nathanhammond do you have a link to that blog post?

webark on 6 Oct 2016

Path forward: https://github.com/nathanhammond/query-string-spec

nathanhammond on 13 Dec 2016

Any update on this? My use case is an array query param getting stringified. Any elegant workaround in the meantime?

cwarny on 9 Feb 2017

👍5

@cwarny Have you tried initializing the property corresponding to the query param as A()?

e.g

// within controller
tags: A(),
queryParams: ['tags']

sarupbanskota on 5 Jul 2017

Is this ever going to be fixed?

robclancy on 30 Apr 2018

I'm just using this mixin now...

import Mixin from '@ember/object/mixin';
import { typeOf } from '@ember/utils';

function basicArray(array) {
  if (typeOf(array) !== 'array') {
    return false;
  }

  return array.every((value) => {
    return ['string', 'number'].includes(typeOf(value));
  });
}

export default Mixin.create({
  serializeQueryParam(value, urlKey, defaultValueType) {
    if (defaultValueType === 'array' && basicArray(value)) {
      return value.slice();
    }

    return this._super(value, urlKey, defaultValueType);
  },
  deserializeQueryParam(value, urlKey, defaultValueType) {
    if (defaultValueType === 'array' && basicArray(value)) {
      return value.slice();
    }

    return this._super(value, urlKey, defaultValueType);
  },
});

robclancy on 30 Apr 2018

👍11

@acorncom @cwarny @johnbradley @nathanhammond @robclancy @rwjblue @sarupbanskota @webark is this still an issue, perhaps we should close or create a new reproduction of this, what do you think?

pixelhandler on 28 Sep 2018

This was created in kind of wrapping up a number of other query param serialization bugs. I believe if those come up again, we can address them one at a time.

webark on 29 Sep 2018

I commented out my mixin and it is still happening on version 3.1.3. I can upgrade to test more but I haven't noticed anything in change logs about this being touched.

robclancy on 1 Oct 2018

👍2

I am experiencing something similar.
Url is being serialised as:
http://localhost:4200/v1/companies?filter[manufacturer-profile__manufacturer-quality-certificate-ids.all]=["5bf9a3f0141edcd078a620b2"]&filter[manufacturer-profile__manufacturer-service-ids.all][]=5bf9a3ef141edcd078a62086&page[number]=1&page[size]=10
instead of:
http://localhost:4200/v1/companies?filter[manufacturer-profile__manufacturer-quality-certificate-ids.all][]=5bf9a3f0141edcd078a620b2&filter[manufacturer-profile__manufacturer-service-ids.all][]=5bf9a3ef141edcd078a62086&page[number]=1&page[size]=10

I also can confirm the mixing suggested by @robclancy fixes the problem

tpetrone on 26 Nov 2018

I saw this bug today on ember 3.5. I had two query-params, one a string and one an array. I think if the query-params got updated before the model refresh had completed then this bug would get triggered. Adding the above mixin to my route fixed it, also debouncing some query-param updates fixed it too.