-
Notifications
You must be signed in to change notification settings - Fork 72
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Service implementation question #441
Comments
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: ***@***.***>
|
Thanks @christophermlne for the reply. I try and didn't work yet for me. In the
Any example on how to query Apollo service directly? |
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
fromapp/services/nav-categories.js
.Minimal Working Example
Start a new app using
Configure Apollo end point in
config/environment.js
:app/gql/queries/allCategories.graphql
:app/services/nav-categories.js
:app/components/my-header.js
:app/components/my-header.hbs
:app/templates/application.hbs
:The text was updated successfully, but these errors were encountered: