Error: markSubscriptionsStale is not a function

[mdbiscan]

I keep getting this error trying to use this package:

Error while processing route: authors this.get(...).markSubscriptionsStale is not a function

Found on line 9 of route-query-manager.js referencing this.get('apollo'):

Class {_super: ƒ, client: ApolloClient, __ember1522174837814: "ember184"}
client: ApolloClient
cache: InMemoryCache {optimistic: Array(0), watches: Array(0), silenceBroadcast: false, config: {…}, addTypename: true, …}
defaultOptions: {}
disableNetworkFetches: false
link: ApolloLink {request: ƒ}
mutate: ƒ ()
query: ƒ ()
queryDeduplication: true
reFetchObservableQueries: ƒ ()
resetStore: ƒ ()
resetStoreCallbacks: []
ssrMode: false
store: DataStore {cache: InMemoryCache}
version: "2.2.8"
watchQuery: ƒ ()

[mdbiscan]

Looking at this more, I'm seeing other methods as undefined: trackSubscription, activeSubscriptions, unsubscribeAll.

Seems to have reference to the wrong service? mutate, query, and watchQuery are all defined.

[bgentry]

@mdbiscan how are you trying to use Apollo? The recommended way is to import a query manager mixin and use that in your route/controller/component/etc:

import Route from "@ember/routing/route";
import RouteQueryManager from "ember-apollo-client/mixins/route-query-manager";
import query from "my-app/gql/queries/human";

export default Route.extend(RouteQueryManager, {
  model(params) {
    let variables = { id: params.id };
    return this.get("apollo").watchQuery({ query, variables }, "human");
  }
});

Though I just realized the readme has some spots that use this.apollo instead of this.get("apollo"), which could potentially cause issues.

[mdbiscan]

This was my original route:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import RouteQueryManager from 'ember-apollo-client/mixins/route-query-manager';
import query from 'ember-apollo-example/gql/queries/allAuthors';

export default Route.extend(RouteQueryManager, {
  apollo: service(),

  model(params) {
    return this.get('apollo')
      .query({ query }, 'author')
      .catch(error => console.error(`Authors Route: ${error}`));
  },
});

This will return the original error. I switched to the following code:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import RouteQueryManager from 'ember-apollo-client/mixins/route-query-manager';
import query from 'ember-apollo-example/gql/queries/allAuthors';

export default Route.extend(RouteQueryManager, {
  apollo: service(),

  model(params) {
    const variables = { id: params.id };

    return this.get('apollo')
      .watchQuery({ query, variables }, 'author')
      .catch(error => console.error(`Authors Route: ${error}`));
  },
});

However, I still get the same error whether or not I use query or watchQuery and whether or not I pass variables (which I am not, so they are null anyway).

One last thing: Removing the mixin (just to get the request going), in my network tab, I definitely get a query returned with no errors. However, the model being returned is always undefined. It's a promise, but undefined when resolved. That has my head scratching...

[bgentry]

Ah, I see the issue. By including the apollo service directly, you’re actually overriding the apollo query manager. The fix is to only use the mixin and not the service injection.

[mdbiscan]

OK, that makes sense now that you point it out. I'm doing this now:

import Route from '@ember/routing/route';
import RouteQueryManager from 'ember-apollo-client/mixins/route-query-manager';
import query from 'ember-apollo-example/gql/queries/allAuthors';

export default Route.extend(RouteQueryManager, {
  model(params) {
    const variables = { id: params.id };

    return this.get('apollo')
      .watchQuery({ query, variables }, 'author')
      .catch(error => console.error(`Authors Route: ${error}`));
  },
});

Getting this error: Uncaught TypeError: Cannot set property '_apolloObservable' of undefined

[mdbiscan]

Interestingly, I changed back to query from watchQuery, and receive no errors. However, the promise returns undefined still.

[viniciussbs]

Have you tried to replace .watchQuery({ query, variables }, 'author') to .watchQuery({ query, variables })?

[mdbiscan]

Ah, that worked. Not sure how it muddled everything.

[bgentry]

Yeah, that's a known issue. If your query doesn't return any data then there's nothing for us to Ember.get on. I'm not sure there's a good solution to it though without a big API change. Glad you got it working!

[mdbiscan]

Ah, well that's good to know. Thanks again for the help!