How can ember-data search for a record using both an ID and extra criteria?

Question

How can ember-data search for a record using both an ID and extra criteria?

While exploring the Ember documentation, I learned that the find() method supports finding by id:

this.store.find('post', 1); // => GET /posts/1

It also allows for searching with arbitrary parameters:

this.store.find('post', { name: "Peter" }); // => GET to /posts?name='Peter'

However, in my specific scenario, I need to search by id and include all fields in the response (some are normally omitted by default), like this:

this.store.find('post', 1); // => GET /posts/1?include=all

I attempted to achieve this using the following code:

this.get('store').find('post', params.post_id, { include : 'all' });

Unfortunately, my additional parameter was not recognized.

Since this seems like a fundamental use case, I must be overlooking something...

How can I successfully accomplish this task?

javascript ember.js ember-data

Answer 1

Answer №1

If you haven't already found a solution to the issue, one workaround is to utilize the adapterOptions within the options argument.

Here's what you can do:

When fetching the model (such as in a route), specify the custom argument you need. For example, if you need to include certain data, you can do so like this:

//file app/routes/post/edit.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.store.findRecord('post', params.post_id, {
      adapterOptions: { include: 'all' }
    });
  }
});

Retrieve this value within the model's adapter to customize the ajax request:

//file app/adapters/post.js

export default JSONAPIAdapter.extend({
  findRecord: function(store, type, id, snapshot) {
    if (Em.get(snapshot, 'include')) {
      let url = this.buildURL(type.modelName, id, snapshot, 'findRecord');
      let query = this.buildQuery(snapshot);
      return this.ajax(url, 'GET', { data: query });
    } else {
      this._super(...arguments);
    }
});

UPDATE 1:

In newer versions of ember-data (>= 2.4.0), you can achieve this more easily by calling

store.findRecord('post', {include: 'all'});

Answer 2

If you haven't already found a solution to the issue, one workaround is to utilize the adapterOptions within the options argument.

Here's what you can do:

When fetching the model (such as in a route), specify the custom argument you need. For example, if you need to include certain data, you can do so like this:

//file app/routes/post/edit.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.store.findRecord('post', params.post_id, {
      adapterOptions: { include: 'all' }
    });
  }
});

Retrieve this value within the model's adapter to customize the ajax request:

//file app/adapters/post.js

export default JSONAPIAdapter.extend({
  findRecord: function(store, type, id, snapshot) {
    if (Em.get(snapshot, 'include')) {
      let url = this.buildURL(type.modelName, id, snapshot, 'findRecord');
      let query = this.buildQuery(snapshot);
      return this.ajax(url, 'GET', { data: query });
    } else {
      this._super(...arguments);
    }
});

UPDATE 1:

In newer versions of ember-data (>= 2.4.0), you can achieve this more easily by calling

store.findRecord('post', {include: 'all'});

Answer 3

Answer №2

Even though PhStoned's code functions correctly, it may lead to errors if the adapterOptions parameter is empty. Please find below an enhanced version of the code.

import Ember from 'ember';
import applicationAdapter from './application';

export default applicationAdapter.extend({
  findRecord: function(store, type, id, snapshot) {
    if (snapshot.adapterOptions)) {
      let url = this.buildURL(type.modelName, id, snapshot, 'findRecord');
      let query = {
        include: Ember.get(snapshot.adapterOptions, 'include')
      };
      return this.ajax(url, 'GET', { data: query });
    } else {
      return this._super(...arguments);
    }
  }
});

Answer 4

Even though PhStoned's code functions correctly, it may lead to errors if the adapterOptions parameter is empty. Please find below an enhanced version of the code.

import Ember from 'ember';
import applicationAdapter from './application';

export default applicationAdapter.extend({
  findRecord: function(store, type, id, snapshot) {
    if (snapshot.adapterOptions)) {
      let url = this.buildURL(type.modelName, id, snapshot, 'findRecord');
      let query = {
        include: Ember.get(snapshot.adapterOptions, 'include')
      };
      return this.ajax(url, 'GET', { data: query });
    } else {
      return this._super(...arguments);
    }
  }
});

Answer 5

Answer №3

If you need to send extra parameters to the backend, consider using queryRecord instead of find.

this.store.queryRecord('article', { id: params.article_id, include: 'all' }).then(function(result) {
  // perform actions with the returned `result`
});

Answer 6

If you need to send extra parameters to the backend, consider using queryRecord instead of find.

this.store.queryRecord('article', { id: params.article_id, include: 'all' }).then(function(result) {
  // perform actions with the returned `result`
});

Answer 7

Answer №4

After trying Rodrigo Marroquim's solution without success, I have found a different approach to solve the issue.
Using Ember version 2.6.0

import Ember from 'ember';
import applicationAdapter from './application';

export default applicationAdapter.extend({
  findRecord: function(store, type, id, snapshot) {
    if (Ember.get(snapshot.adapterOptions, 'include')) {
      let url = this.buildURL(type.modelName, id, snapshot, 'findRecord');
      let query = {
        include: Ember.get(snapshot.adapterOptions, 'include')
      };
      return this.ajax(url, 'GET', { data: query });
    } else {
      this._super(...arguments);
    }
  }
});

Example of usage:

this.get('store').findRecord('modelName', id, {
          adapterOptions: { include: 'all' }
});

Answer 8

After trying Rodrigo Marroquim's solution without success, I have found a different approach to solve the issue.
Using Ember version 2.6.0

import Ember from 'ember';
import applicationAdapter from './application';

export default applicationAdapter.extend({
  findRecord: function(store, type, id, snapshot) {
    if (Ember.get(snapshot.adapterOptions, 'include')) {
      let url = this.buildURL(type.modelName, id, snapshot, 'findRecord');
      let query = {
        include: Ember.get(snapshot.adapterOptions, 'include')
      };
      return this.ajax(url, 'GET', { data: query });
    } else {
      this._super(...arguments);
    }
  }
});

Example of usage:

this.get('store').findRecord('modelName', id, {
          adapterOptions: { include: 'all' }
});

Answer 9

Answer №5

Instead of using the find function, I recommend utilizing the query function for more flexibility in filtering. By doing so, you can apply multiple filters without limitations.

var storeData = this.get('dataStore');
storeData.query('blog', { 
    _id: params.blog_id,
    include : 'all'
 }).then(function(posts) {
      // Perform actions with the retrieved posts
});

Answer 10

Instead of using the find function, I recommend utilizing the query function for more flexibility in filtering. By doing so, you can apply multiple filters without limitations.

var storeData = this.get('dataStore');
storeData.query('blog', { 
    _id: params.blog_id,
    include : 'all'
 }).then(function(posts) {
      // Perform actions with the retrieved posts
});

Answer 11

Answer №6

Consider implementing the adapter with ajax for improved functionality:

const { getOwner } = Ember;
let customAdapter = getOwner(this).lookup('adapter:application');
customAdapter.ajax(
  adapter.buildURL(`posts/${id}`), 'GET', { data: { include: 'all' }
);

#> /posts/1?include=all

This alternative ajax approach offers even more advantages:

const { inject: { service } } = Ember;

export default Ember.Route.extend({
  ajaxService: service(),

  async model(params) {
    let id = params.id;

    return await this.get('ajaxService')
      .request(`/posts/${id}`, {
        data: { include: 'all' }
      }).then(({ post }) => {
        if (post) {
          return this.store.push(this.store.normalize('post', post));
        }
      });
  }
});

Answer 12

Consider implementing the adapter with ajax for improved functionality:

const { getOwner } = Ember;
let customAdapter = getOwner(this).lookup('adapter:application');
customAdapter.ajax(
  adapter.buildURL(`posts/${id}`), 'GET', { data: { include: 'all' }
);

#> /posts/1?include=all

This alternative ajax approach offers even more advantages:

const { inject: { service } } = Ember;

export default Ember.Route.extend({
  ajaxService: service(),

  async model(params) {
    let id = params.id;

    return await this.get('ajaxService')
      .request(`/posts/${id}`, {
        data: { include: 'all' }
      }).then(({ post }) => {
        if (post) {
          return this.store.push(this.store.normalize('post', post));
        }
      });
  }
});

How can ember-data search for a record using both an ID and extra criteria?

Answer №1

UPDATE 1:

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Randomize elements with the click of a button

Does HTML store information in Access databases?

Upon receiving data from the Api, the data cannot be assigned to the appropriate datatype within the Angular Object

What is the best way to retrieve the response from an Observable/http/async call in Angular?

Creating a specialized .toString() function for an array

Using PHP and Ajax to retrieve a distinct string prior to executing a time-consuming script

Turning JSON data into an HTML table dynamically using jQuery for every single attribute

Guidelines for queuing method calls using Vue.js

Tips for sending routeparams value to model window in AngularJS

I am puzzled as to why my ajax script is giving me a 404 error even though the URL appears to be correct

Saving JSON data as a file on server

What steps should be taken once the idToken in Firebase has expired?

The background failed to display (potentially due to a hovering function)

Optimal techniques for leveraging CSS within Mui and Reactjs

Display a badge in the navbar on specific VueJS pages

Divide the table header column "th" into two separate columns

JavaScript Issue with Click Sound Not Functioning

Displaying the complete response on Angular is possible, but JSON only shows the full response

Encountering an issue when deploying a project using node, webpack, express, and mysql to Heroku. The error message states: "Uncaught ReferenceError: regeneratorRuntime is not

Guide on using Ajax and spring MVC to dynamically fill a modal form