Ember-data-url-templates - shapshot.belongsTo is not a function

1

I’m trying to use ember-data-url-templates add-on and getting the below error in the adapter:

# adapters/shop_language.js

import ApplicationAdapter from './application';
import UrlTemplates from "ember-data-url-templates";

export default ApplicationAdapter.extend(UrlTemplates, {
  findAllUrlTemplate: '/shops/{shopId}/languages',
  createRecordUrlTemplate: '/shops/{shopId}/languages',

  urlSegments: {
    shopId: function(type, id, snapshot, query) {
      return snapshot.belongsTo('shop', { id: true });
    },
  },
});

In the shop-languages.js route handler:

# routes/shop_languages.js
import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
import RSVP from 'rsvp';
import { inject as service } from '@ember/service';

export default Route.extend(AuthenticatedRouteMixin, {
  currentShop: service('current-shop'),

  model() {
    return RSVP.hash({
          shopLanguages: this.store.findAll('shop-language', { shop_id: this.get('currentShop.shop').get('id')}),
          languages: this.store.findAll('language')
        });
  }
});

When I try to access the above route, I get the below error:

Uncaught TypeError: snapshot.belongsTo is not a function
    at Class.shopId (shop-language.js:13)
    at url-templates.js:39
    at subFunction (uri-templates.js:103)

Do I use this add-on in a wrong way ? Should I import in some way the snapshot-api ? Thank you.

Used versions:

  • "ember-data-url-templates": "^0.4.0",
  • ember: 3.0
1 Like
2

I’m running into the same issue. Did you ever get this resolved?

3

Here is my version of shop-language.js adapter that works:

import ApplicationAdapter from './application';
import UrlTemplates from "ember-data-url-templates";

export default ApplicationAdapter.extend(UrlTemplates, {
  urlTemplate: '/shops/{shopId}/languages',
  findAllUrlTemplate: '/shops/{shopId}/languages',
  createRecordUrlTemplate: '/shops/{shopId}/languages',
  deleteRecordUrlTemplate: '/shops/{shopId}/languages/{id}',

  urlSegments: {
    shopId: function(type, id, snapshot, query) {
      if (query && query.shop_id) {
        return query.shop_id;
      }
      return snapshot.belongsTo('shop', { id: true });
    },

    id: function(type, id, snapshot/*, query*/) {
      return snapshot.id;
    }
  }
});

Here is shop-languages.js route model hook:

#routes/shop-languages.js
...
model() {
    return RSVP.hash({
      shopLanguages: this.store.query('shop-language', { shop_id: this.get('currentShop.shop').get('id')}),
      languages: this.store.findAll('language')
    });
  },
...

Hope this helps.