Service implementation question

[rgaiacs]

I successfully fetched data from Apollo GraphQL Server in Amber route using ember-apollo-client. I tried the same approach to have a service fetching data but I'm getting Uncaught TypeError: this.apollo.query is not a function from app/services/nav-categories.js.

Minimal Working Example

Start a new app using

$ ember new super-rentals --lang en
$ ember generate service nav-categories

Configure Apollo end point in config/environment.js:

module.exports = function (environment) {
  const ENV = {
    ...

    apollo: {
      apiURL: 'http://localhost:4000',
    }
  };

app/gql/queries/allCategories.graphql:

query AllCategories {
  categories {
    name
  }
}

app/services/nav-categories.js:

import Service from '@ember/service';
import { queryManager } from "ember-apollo-client";
import allCategories from "super-rentals/gql/queries/allCategories.graphql";

export default class NavCategoriesService extends Service {
  constructor() {
    super();
    this.apollo = queryManager();
    this.categories = this.apollo.query({ query: allCategories });
  }
}

app/components/my-header.js:

import Component from '@glimmer/component';
import { service } from '@ember/service';

export default class CartContentsComponent extends Component {
  // Will load the service defined in: app/services/nav-categories.js
  @service navCategories;
}

app/components/my-header.hbs:

<ul>
{{#each this.navCategories.categories as |category|}}
  <li>{{category.name}}</li>
{{/each}}
</ul>

app/templates/application.hbs:

<MyHeader></MyHeader>
{{outlet}}

[christophermlne]

I think this has more to do with the order in which your services are initialized by the framework. I'd move this code out of the constructor. Trigger the API call using an action on the service from your route/controller/component.

…

On Tue, Sept 19, 2023, 12:53 p.m. Raniere Silva ***@***.***> wrote: I successfully fetched data from Apollo GraphQL Server in Amber route using ember-apollo-client <https://github.com/ember-graphql/ember-apollo-client>. I tried the same approach to have a service fetching data but I'm getting Uncaught TypeError: this.apollo.query is not a function from app/services/nav-categories.js. Minimal Working Example Start a new app using $ ember new super-rentals --lang en $ ember generate service nav-categories Configure Apollo end point in config/environment.js: module.exports = function (environment) { const ENV = { ... apollo: { apiURL: 'http://localhost:4000', } }; app/gql/queries/allCategories.graphql: query AllCategories { categories { name } } app/services/nav-categories.js: import Service from ***@***.***/service'; import { queryManager } from "ember-apollo-client"; import allCategories from "super-rentals/gql/queries/allCategories.graphql"; export default class NavCategoriesService extends Service { constructor() { super(); this.apollo = queryManager(); this.categories = this.apollo.query({ query: allCategories }); } } app/components/my-header.js: import Component from ***@***.***/component'; import { service } from ***@***.***/service'; export default class CartContentsComponent extends Component { // Will load the service defined in: app/services/nav-categories.js @service navCategories; } app/components/my-header.hbs: <ul> {{#each this.navCategories.categories as |category|}} <li>{{category.name}}</li> {{/each}} </ul> app/templates/application.hbs: <MyHeader></MyHeader> {{outlet}} — Reply to this email directly, view it on GitHub <#441>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHWC3KASG2EGHEZMFWP4MLX3HEYJANCNFSM6AAAAAA46TQ2JQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[rgaiacs]

Thanks @christophermlne for the reply. I try and didn't work yet for me. In the README, I found

You should not need to use the Apollo service directly for most regular usage, instead utilizing the queryManager computed macro. However, you will probably need to customize options on the apollo service, and might need to query it directly for some use cases (such as loading data from a service rather than a route or component.

Any example on how to query Apollo service directly?