Schema type and JSON:API data type mismatch

[musaffa]

We get the following error with Ember Data models and WarpDrive schemas:

Missing Resource Type: received resource data with a type 'pages' but no schema could be found with that name.

Schema/Resource type is singular. So there's a mismatch with JSON:API data type which is pluralized by convention in Ember Data JSON:API serializer.

{
  data: [
    {
      type: 'pages',
      id: '1',
      attributes: ...
    }
  ]
}

So the following this.store.request fails.

// route
import Route from '@ember/routing/route';
import { service } from '@ember/service';
import { query } from '@ember-data/json-api/request';
// import { query } from '@warp-drive/utilities/json-api'; also doesn't work

export default class PageIndexRoute extends Route {
  @service store;

  model(params) {
    return this.store.request(query('page', params));
  }
}

Data Model Setup:

// model
import Model, { attr } from '@ember-data/model';

export default class Page extends Model {
  @attr() title;
  @attr() slug;
  @attr() body;
}

// store.js
import { useLegacyStore } from '@warp-drive/legacy';
import { JSONAPICache } from '@warp-drive/json-api';

const Store = useLegacyStore({
  legacyRequests: true,
  cache: JSONAPICache,
  schemas: [],
  handlers: []
});

export default Store;

The same error occurs if we replace Data model with Schema:

// page schema
import { withDefaults } from '@warp-drive/legacy/model/migration-support';

export const PageSchema = withDefaults({
  type: 'page',
  fields: [
    { name: 'title', kind: 'attribute', type: 'string' },
    { name: 'slug', kind: 'attribute', type: 'string' },
    { name: 'body', kind: 'attribute', type: 'string' }
  ]
});

// store.js
import { useLegacyStore } from '@warp-drive/legacy';
import { JSONAPICache } from '@warp-drive/json-api';
import { PageSchema } from 'web-app/data/page/schema';

const Store = useLegacyStore({
  legacyRequests: true,
  cache: JSONAPICache,
  schemas: [
    PageSchema
  ],
  handlers: []
});

export default Store;

Versions:

@warp-drive/ember: 5.8.1
ember-data: 5.8.1

Expectation

WarpDrive should give us a mechanism to use singular type in schema and pluralized type in JSON:API data and translate the type to and from seamlessly.

[runspired]

WarpDrive should give us a mechanism to use singular type in schema and pluralized type in JSON:API data and translate the type to and from seamlessly.

Ideally you should use the same type on the client as you do with your API, but if you want your API to be different from what you use in the client then use a handler to normalize the types. It's not the JSON:API serializer producing plurals (that's not even in use here), its your API.

[musaffa]

@runspired We have changed the JSON:API type to singular page in the API. Type mismatch error is gone, this.store.request completes but no data is loaded in the store.

The same happens in both Data Model and Schema setups.

[runspired]

completes but no data is loaded in the store.

what's the api response? what does the debug logging say gets inserted? how are you checking?

[musaffa]

API Response:

{
    "data": [
        {
            "id": "decb121f-7d01-4b83-985c-c9a494a8b70e",
            "type": "page",
            "attributes": {
                "title": "About",
                "slug": "about",
                "body": "<p>This is a text body</p>"
            }
        }
    ],
    "meta": {
        "total_pages": 1
    }
}

We have updated the model hook as below:

async model(params) {
  let { content } = await this.store.request(query('page', params));
  return content;
}

(Not sure whether this version of model hook is the correct setup.)

We are not using any special settings for logging. We have a running application which shows the list of pages in this route. In this case, it does not show any pages.

When we try to check data in the Ember Inspector (we have @ember-data/debug installed), we don't see any data loaded there. Instead we get this error message in the console:

basic-B1dkgN3d.js:44 Ember Inspector has errored.
This is likely a bug in the inspector itself.
You can report bugs at https://github.com/emberjs/ember-inspector.
Error message: Cannot set properties of undefined (setting '_debugInfo')
Stack trace: TypeError: Cannot set properties of undefined (setting '_debugInfo')
    at v.watchTypeIfUnseen (data-adapter.js:124:24)
    at data-adapter.js:200:12
    at Map.forEach (<anonymous>)
    at v.watchModelTypes (data-adapter.js:199:21)
    at _Class.getModelTypes (main.js:3730:46)
    at evented-BCTya3yE.js:28:9
    at Array.forEach (<anonymous>)
    at Evented.trigger (evented-BCTya3yE.js:23:41)
    at port.js:69:14
    at Port.<anonymous> (port.js:100:16)

[runspired]

When you say "no data is loaded into the store" what exactly do you mean? My suspicion is that because you aren't using typescript (at least in these examples) that you're using the response incorrectly in the template and not getting editor/linting feedback about it. It might help to show the template here.

[musaffa]

By "no data is loaded into the store" I meant "There's no data of this resource in Ember Inspector".

Actually data has been loaded. But it's not just available in Ember Inspector, although we have @ember-data/debug installed. We were accessing the data wrongly in the model hook. It should have been like below:

import { query } from '@warp-drive/utilities/json-api';

....
async model(params) {
  let { content } = await this.store.request(query('page', params));
  return content.data;
}

Now we can see the array of page resources fetched from the API.

[musaffa]

It works only with singular JSON:API resource type keys.

Legacy JSON:API serializer used to convert type keys using hooks. It used to enforce singular type key from payload and plural type key of payload from model name: https://github.com/warp-drive-data/warp-drive/blob/v5.5.0/packages/serializer/src/json-api.js#L353. The developers could override these hooks if they wanted (we didn't need to).

[runspired]

@musaffa WarpDrive/EmberData's convention has always been singular-dasherized for the cache/app format. If your API uses plurals, you can instead register and use plurals throughout the app or you use a handler (the replacement for a serializer) to normalize the types as needed.

[musaffa]

Currently our issue has been solved. We can also make it work with Mirage by hooking into typeKeyForModel.

@runspired When the Javascript community starts adoping this library, many situations can arise. For example, people may not have the control over the API. This library which aims to support many use cases, should be flexible enough on the client side. It can be opinionated but flexible when a need arises.