push-with-spread

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

models.obj\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export default class extends Model {
  @hasMany('other') other;
}

models.other\.js

import Model from 'ember-data/model';
/*
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
*/

export default class extends Model {
}

routes.application\.js

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    // Step 1: Create a very large array to sideload into the store
    let payload = new Array(200000)
      .fill(null)
      .map((_, id) => ({ id, type: 'other' })); 
    
    // Step 2: Load in the very large array beside a primary array of whatever length
    let serializer = this.store.serializerFor('obj');
    let model = this.store.modelFor('obj');
    
    try {
      let normalized = serializer.normalizeArrayResponse(this.store, model, {
        obj: [{ id: 1 }],
        other: payload,
      })

      this.store.push(normalized);
      return {
        obj: this.store.peekAll('obj'),
        other: this.store.peekAll('other'),
      };
    } catch (err) {
      // Step 3: Receive max stack error
      return { err };
    }
  }
});

serializers.application\.js

import Serializer from '@ember-data/serializer/rest';

export default class ApplicationSerializer extends Serializer {
}

serializers.obj\.js

import ApplicationSerializer from './application';
import { EmbeddedRecordsMixin } from '@ember-data/serializer/rest';

const Base = ApplicationSerializer;//.extend(EmbeddedRecordsMixin);

export default class ObjSerialzier extends Base {
  // attrs = {
  //   other: {
  //     embedded: 'always',
  //   }
  // }
}

templates.application\.hbs

{{#if this.model.err}}
  <strong style="color:red;">{{this.model.err.message}}</strong>
  <p>{{this.model.err.stack}}</p>
{{else}}
  <h1>There are {{this.model.obj.length}} primary <code>obj</code> records</h1>
  <em>But {{this.model.other.length}} records were sideloaded</em>
{{/if}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.18.0"
  }
}