ember error this.store.findAll is not a function

Question

hey all im going through the emberjs tutorial and i've run into this issue that i'm unable to resolve. when i try to call the findAll function from store it throws a typeerror and says that findAll is not a function. when i use The this.get() method it says itss a classic ember object method, and can't be used in octane classes. does anybody have any idea how to fix this?

thanks in advance for your time!

app/route/rental.js

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

export default class RentalsRoute extends Route {
  model() {
    return this.store.findAll('rental');
  }
}

app/models/rental.js

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

export default class RentalModel extends Model {
  @attr title;
  @attr owner;
  @attr city;
  @attr propertyType;
  @attr image;
  @attr bedrooms;
  @attr description;
}

mirage/config.js

export default function () {
  this.namespace = '/api';

  this.get('/rentals', function () {
    return {
      data: [
        {
          type: 'rentals',
          id: 'grand-old-mansion',
          attributes: {
            title: 'Grand Old Mansion',
            owner: 'Veruca Salt',
            city: 'San Francisco',
            'property-type': 'Estate',
            bedrooms: 15,
            image:
              'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
          },
        },
        {
          type: 'rentals',
          id: 'urban-living',
          attributes: {
            title: 'Urban Living',
            owner: 'Mike Teavee',
            city: 'Seattle',
            'property-type': 'Condo',
            bedrooms: 1,
            image:
              'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg',
          },
        },
        {
          type: 'rentals',
          id: 'downtown-charm',
          attributes: {
            title: 'Downtown Charm',
            owner: 'Violet Beauregarde',
            city: 'Portland',
            'property-type': 'Apartment',
            bedrooms: 3,
            image:
              'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg',
          },
        },
      ],
    };
  });
}

Which ember version do you use? I have an idea that you should use an explicit `store` injection. In your route file add `import { inject as service } from '@ember/service';` at the top and then in the class definition add `@service store;`. If that helps I'll make it the answer. — Andrey Stukalin, Dec 27 '21 at 03:58
@AndreyStukalin thanks a lot that fixed it! also it was version ember 4.0.1. yes please make it the answer and ill accept it. just curious why i needed to do that? — jordan, Dec 27 '21 at 06:18

score 7 · Accepted Answer · answered Dec 27 '21 at 07:02

The reason why you see it is that starting from the v4 Ember doesn't allow some implicit service injections which were there up recently. The store injection in routes was one of them. It was first added as a deprecation in 3.26 but now as of v4 it's removed and apparently they haven't updated the documentation.

What you should do is to inject it explicitly, i.e. in your app/route/rental.js make

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class RentalsRoute extends Route {
  @service store;

  model() {
    return this.store.findAll('rental');
  }
}

ember error this.store.findAll is not a function

1 Answers1