Various and Sundries Questions

[DevanB]

Hey there!

I'd like to start off by saying that this looks to be the most feature complete, maintained Apollo integration for Ember, so thank you very much for this!

I am writing a tutorial for How To GraphQL on building a simple HackerNews clone using Ember+Apollo, and I am using this integration. Unfortunately, I do have a few questions. I'd love to join a Slack channel, Discord channel, or whatever where I can stay in contact if that is available. In the case that it isn't, I'll include some questions below:

1. Where is the suggested location for adding the gql/queries folder, and what is the suggested import for a single query in that queries folder? I only ask these questions because I have been unable to get it to work. I sidestepped this by importing gql from graphql-tag and wrote the query in-line, which works perfectly.

2. Any news on subscriptions and pagination? I'd love to include these in the tutorial, but the best answer I can find (after looking through outstanding issues) seems to be that it is a WIP. I'm completely fine noting this in my tutorial, and already have approval to do that. If that were to happen, I'd love to keep in touch and continually update the tutorial when updates are released to this wonderful integration.

3. What are the implications of not using the UnsubscribeRoute mixin? I ask because I would prefer not to use and explain it in the tutorial if the performance loss is minimal. An alternative question is how you can explicitly use query instead of watchQuery?

4. Are the error and loading states that Apollo returns available? I'd love to easily show a "Loading..." message or error message if they are available.

I might have some more questions, but for now, that is all. Thanks so much for this fine integration!

[DevanB]

ping @bgentry

[n1ru4l]

@DevanB

You should put the .graphql files inside app/gql.
Then you can import them like this:

import ProfileDetailQuery from '<project-name>/gql/queries/statistics-profile/profile-detail-query';
import ProfilePreviewQuery from '<project-name>/gql/queries/statistics-profile/profile-preview-query';

The api is not like the react api, I would love to see this library to be more like the react implementation.
ATM I am using a PromiseObject wrapper to get those infos

import Ember from 'ember';
import Component from 'ember-component';
import injectService from 'ember-service/inject';
import get from 'ember-metal/get';
import set from 'ember-metal/set';

const {
    ObjectProxy,
    PromiseProxyMixin,
} = Ember;

const PromiseObject = ObjectProxy.extend(PromiseProxyMixin);

export default Component.extend({
  // computed state
  isLoadingProfileDetail: computed.bool(`singleProfileDetailQuery.isPending`),
  initSingleProfileDetailQuery() {
      const singleProfileId = get(this, `singleProfileId`);
      const apollo = get(this, `apollo`);
      const singleProfilePreviewQueryPromise = apollo.query({
          query: SingleProfileDetailQuery,
          variables: { singleProfileId },
      });
      const singleProfileDetailQuery = PromiseObject.create({ promise: singleProfilePreviewQueryPromise });
      set(this, `singleProfileDetailQuery`, singleProfileDetailQuery);
  },
  // ...
})

[DevanB]

@n1ru4l

Thanks for the information!

1. Didn't realize the import needed to use <app-name> specifically.
2. Interesting, I thought the error and loading feedback were on Apollo, not the React implementation of it.

[n1ru4l]

@DevanB Regarding 2: I am pretty sure those are from apollo-client, but they seem not to be exposed by apollo-ember-client.

[DevanB]

Correct, they are apollo-client specific. After looking at other issues on ember-apollo-client, they look like a WIP, possibly.

[viniciussbs]

Where is the suggested location for adding the gql/queries folder, and what is the suggested import for a single query in that queries folder? I only ask these questions because I have been unable to get it to work. I sidestepped this by importing gql from graphql-tag and wrote the query in-line, which works perfectly.

Inside your app/ folder, and you can choose the name that fits better to you: app/gql, app/graphql etc. You need to put the app name when importing the files as @n1ru4l mentioned.

Any news on subscriptions and pagination? I'd love to include these in the tutorial, but the best answer I can find (after looking through outstanding issues) seems to be that it is a WIP. I'm completely fine noting this in my tutorial, and already have approval to do that. If that were to happen, I'd love to keep in touch and continually update the tutorial when updates are released to this wonderful integration.

There's a open issue discussing pagination and a work in progress on it that I guess is almost ready to be merged. I'm using it on my app.

There's no work in progress on subscriptions yet.

What are the implications of not using the UnsubscribeRoute mixin? I ask because I would prefer not to use and explain it in the tutorial if the performance loss is minimal. An alternative question is how you can explicitly use query instead of watchQuery?

The UnsubscribeRoute mixin will be replaced by the RouteQueryManager. If you don't you one them, you will accumulate active query subscriptions during your app life cycle. I don't know the effective impact of not using them.

You can use queryOnce to use query instead of watchQuery. In the next versions queryOnce will be renamed to query to follow the original function name though.

Are the error and loading states that Apollo returns available? I'd love to easily show a "Loading..." message or error message if they are available.

I guess not. Maybe you can try it with Ember Concurrency addon.

[DevanB]

@viniciussbs Thanks for the response!

I'm excited to see pagination added :)