My movie list
2 | 3 | 26 | 27 | 28 |
29 | {{#each this.model.movies as |movie|}}
30 |
33 |
--------------------------------------------------------------------------------
/ember-cli-build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
4 |
5 | module.exports = function (defaults) {
6 | let app = new EmberAddon(defaults, {
7 | pretender: {
8 | enabled: true,
9 | },
10 | emberApolloClient: {
11 | keepGraphqlFileExtension: false,
12 | },
13 | });
14 |
15 | /*
16 | This build file specifies the options for the dummy test app of this
17 | addon, located in `/tests/dummy`
18 | This build file does *not* influence how the addon or the app using it
19 | behave. You most likely want to be modifying `./index.js` or app's build file
20 | */
21 |
22 | const { maybeEmbroider } = require('@embroider/test-setup');
23 | return maybeEmbroider(app, {
24 | skipBabel: [
25 | {
26 | package: 'qunit',
27 | },
28 | ],
29 | });
30 | };
31 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/movie-detail.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import layout from '../templates/components/movie-detail';
3 | import { computed } from '@ember/object';
4 |
5 | export default Component.extend({
6 | layout,
7 |
8 | formattedReleaseDate: computed('movie.releaseDate', function () {
9 | if (this.movie.releaseDate) {
10 | return new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(
11 | new Date(this.movie.releaseDate + ' 00:00:00')
12 | );
13 | }
14 |
15 | return '';
16 | }),
17 |
18 | releaseYear: computed('movie.releaseDate', function () {
19 | if (this.movie.releaseDate) {
20 | return new Intl.DateTimeFormat('en-US', { year: 'numeric' }).format(
21 | new Date(this.movie.releaseDate + ' 00:00:00')
22 | );
23 | }
24 |
25 | return '';
26 | }),
27 | });
28 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/components/movie-detail.hbs:
--------------------------------------------------------------------------------
1 |
2 |
29 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/create-review.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import layout from '../templates/components/create-review';
3 | import mutation from 'dummy/gql/mutations/create-review';
4 | import { inject as service } from '@ember/service';
5 |
6 | export default Component.extend({
7 | layout,
8 |
9 | init() {
10 | this._super(...arguments);
11 |
12 | this.review = {};
13 | this.response = null;
14 | },
15 |
16 | apollo: service(),
17 |
18 | actions: {
19 | createReview(movieId, stars, commentary) {
20 | let variables = {
21 | movieId,
22 | review: {
23 | stars: parseInt(stars),
24 | commentary,
25 | },
26 | };
27 |
28 | return this.apollo.mutate({ mutation, variables }).then((response) => {
29 | this.set('response', JSON.stringify(response));
30 | });
31 | },
32 | },
33 | });
34 |
--------------------------------------------------------------------------------
/tests/dummy/app/routes/movie.js:
--------------------------------------------------------------------------------
1 | import Route from '@ember/routing/route';
2 | import { queryManager, getObservable } from 'ember-apollo-client';
3 | import query from 'dummy/gql/queries/movie';
4 | import mutation from 'dummy/gql/mutations/change-movie-title';
5 |
6 | export default Route.extend({
7 | apollo: queryManager(),
8 |
9 | model({ id }) {
10 | return this.apollo.watchQuery({
11 | query,
12 | variables: {
13 | id,
14 | },
15 | fetchPolicy: 'network-only',
16 | });
17 | },
18 |
19 | actions: {
20 | refreshUsingRoute() {
21 | this.refresh();
22 | },
23 |
24 | refetchUsingObservable(model) {
25 | const observable = getObservable(model);
26 | observable.refetch();
27 | },
28 |
29 | changeTitle(id, title) {
30 | return this.apollo.mutate({
31 | mutation,
32 | variables: { id, title },
33 | });
34 | },
35 | },
36 | });
37 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/components/create-review.hbs:
--------------------------------------------------------------------------------
1 |
3 | {{#if @movie.posterPath}}
4 | 
5 | {{else}}
6 | 
7 | {{/if}}
8 |
9 |
5 | {{else}}
6 |
10 |
28 |
11 |
12 | {{@movie.title}}
13 |
14 |
15 | {{#if this.releaseYear}}
16 | ({{this.releaseYear}})
17 | {{/if}}
18 |
19 |
20 | 21 | {{@movie.overview}} 22 |
23 | 24 |
25 | User Rating: {{@movie.voteAverage}}
26 |
27 |
2 |
6 |
7 |
8 | 12 | 13 |
14 | 18 |
19 |
20 |
34 |
35 | {{#if this.response}}
36 | 8 | 12 | 13 |
14 | 18 |
Response:
37 |
38 | {{this.response}}
39 |
40 | {{/if}}
41 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/components/movie-card.hbs:
--------------------------------------------------------------------------------
1 |
2 |
29 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/movie.hbs:
--------------------------------------------------------------------------------
1 |
3 |
4 | {{#if @movie.posterPath}}
5 | 
6 | {{else}}
7 |
8 | {{/if}}
9 |
10 |
11 |
6 | {{else}}
7 |
12 |
28 |
13 |
14 | {{@movie.title}}
15 |
16 |
17 | {{this.formattedReleaseDate}}
18 |
19 |
20 | 21 | {{@movie.overview}} 22 |
23 | 24 |
25 | User Rating: {{@movie.voteAverage}}
26 |
27 | Movie Detail
2 | 3 |
40 | {{#each this.reviews as |review|}}
41 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2019 Blake Gentry
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 |
--------------------------------------------------------------------------------
/.gqlconfig:
--------------------------------------------------------------------------------
1 | {
2 | schema: {
3 | files: 'tests/fixtures/test-schema.graphql'
4 | },
5 | query: {
6 | files: [
7 | // query gql files
8 | {
9 | match: 'tests/dummy/app/gql/**/*.graphql',
10 | parser: 'QueryParser',
11 | // required until fragment imports work: https://github.com/Mayank1791989/gql/issues/3
12 | validate: {
13 | extends: "gql-rules-query",
14 | rules: {
15 | KnownFragmentNames: "off",
16 | NoUnusedFragments: "off"
17 | }
18 | }
19 | },
20 | // [Embedded queries] gql tag files
21 | {
22 | match: { include: 'tests/dummy/app/**/*.js' },
23 | parser: [ 'EmbeddedQueryParser', { startTag: 'gql`', endTag: '`' } ],
24 | // required until fragment imports work: https://github.com/Mayank1791989/gql/issues/3
25 | validate: {
26 | extends: "gql-rules-query",
27 | rules: {
28 | KnownFragmentNames: "off",
29 | NoUnusedFragments: "off"
30 | }
31 | }
32 | },
33 | ],
34 | },
35 | }
36 |
--------------------------------------------------------------------------------
/.github/release-drafter.yml:
--------------------------------------------------------------------------------
1 | # Configuration for Release Drafter - https://github.com/toolmantim/release-drafter
2 |
3 | name-template: v$NEXT_MINOR_VERSION
4 | tag-template: v$NEXT_MINOR_VERSION
5 | categories:
6 | - title: ':boom: Breaking Change'
7 | label: 'Type: Breaking Change'
8 |
9 | - title: ':zap: New Feature'
10 | label: 'Type: Feature'
11 |
12 | - title: ':rocket: Enhancement'
13 | label: 'Type: Enhancement'
14 |
15 | - title: ':bug: Bug Fix'
16 | label: 'Type: Bug'
17 |
18 | - title: ':nail_care: Refactor'
19 | label: 'Type: Refactor'
20 |
21 | - title: ':memo: Documentation'
22 | label: 'Type: Documentation'
23 |
24 | - title: ':house: Internal'
25 | label: 'Type: Internal'
26 |
27 | - title: ':wrench: Tooling'
28 | label: 'Type: Tooling'
29 |
30 | - title: ':package: Dependencies'
31 | label: 'Type: Dependencies'
32 |
33 | change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
34 | no-changes-template: '- No changes'
35 | template: |
36 | $CHANGES
37 |
38 | ***
39 |
40 | ### Contributors
41 |
42 | $CONTRIBUTORS
43 |
44 | ***
45 |
46 | For full changes, see the [comparison between $PREVIOUS_TAG and v$NEXT_MINOR_VERSION](https://github.com/ember-graphql/ember-apollo-client/compare/$PREVIOUS_TAG...v$NEXT_MINOR_VERSION)
47 |
--------------------------------------------------------------------------------
/tests/dummy/app/schema.graphql:
--------------------------------------------------------------------------------
1 | scalar Date
2 |
3 | schema {
4 | query: Query
5 | mutation: Mutation
6 | }
7 |
8 | # The query type, represents all of the entry points into our object graph
9 | type Query {
10 | movies(topRated: Boolean): [Movie!]
11 | movie(id: ID!): Movie
12 | }
13 |
14 | # The mutation type, represents all updates we can make to our data
15 | type Mutation {
16 | changeMovieTitle(id: ID!, title: String!): Movie
17 | createReview(movieId: ID!, review: ReviewInput!): Review
18 | }
19 |
20 | type Movie {
21 | id: ID!
22 | title: String!
23 | overview: String!
24 | voteAverage: Float
25 | posterPath: String
26 | releaseDate: Date
27 | reviews: ReviewsConnection!
28 | }
29 |
30 | # Represents a review for a movie
31 | type Review {
32 | # The number of stars this review gave, 1-5
33 | stars: Int!
34 |
35 | # Comment about the movie
36 | commentary: String
37 | }
38 |
39 | type ReviewEdge {
40 | node: Review!
41 | }
42 |
43 | type ReviewsConnection {
44 | edges: [ReviewEdge]!
45 | }
46 |
47 | # The input object sent when someone is creating a new review
48 | input ReviewInput {
49 | # 0-5 stars
50 | stars: Int!
51 |
52 | # Comment about the movie, optional
53 | commentary: String
54 | }
55 |
56 | union SearchResult = Movie | Review
57 |
--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{review.stars}} stars
42 | {{else}} 43 |No reviews
44 | {{/each}} 45 |
25 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {{content-for "body-footer"}}
37 | {{content-for "test-body-footer"}}
38 |
39 |
40 |
--------------------------------------------------------------------------------
/tests/dummy/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function (environment) {
4 | const ENV = {
5 | modulePrefix: 'dummy',
6 | environment,
7 | rootURL: '/',
8 | locationType: 'history',
9 | apollo: {
10 | apiURL: 'https://test.example/graphql',
11 | },
12 | EmberENV: {
13 | FEATURES: {
14 | // Here you can enable experimental features on an ember canary build
15 | // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
16 | },
17 | },
18 |
19 | APP: {
20 | // Here you can pass flags/options to your application instance
21 | // when it is created
22 | },
23 | };
24 |
25 | if (environment === 'development') {
26 | // ENV.APP.LOG_RESOLVER = true;
27 | // ENV.APP.LOG_ACTIVE_GENERATION = true;
28 | // ENV.APP.LOG_TRANSITIONS = true;
29 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
30 | // ENV.APP.LOG_VIEW_LOOKUPS = true;
31 | }
32 |
33 | if (environment === 'test') {
34 | // Testem prefers this...
35 | ENV.locationType = 'none';
36 |
37 | // keep test console output quieter
38 | ENV.APP.LOG_ACTIVE_GENERATION = false;
39 | ENV.APP.LOG_VIEW_LOOKUPS = false;
40 |
41 | ENV.APP.rootElement = '#ember-testing';
42 | ENV.APP.autoboot = false;
43 | }
44 |
45 | if (environment === 'production') {
46 | // do stuff for production
47 | }
48 |
49 | return ENV;
50 | };
51 |
--------------------------------------------------------------------------------
/tests/helpers/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | setupApplicationTest as upstreamSetupApplicationTest,
3 | setupRenderingTest as upstreamSetupRenderingTest,
4 | setupTest as upstreamSetupTest,
5 | } from 'ember-qunit';
6 |
7 | // This file exists to provide wrappers around ember-qunit's / ember-mocha's
8 | // test setup functions. This way, you can easily extend the setup that is
9 | // needed per test type.
10 |
11 | function setupApplicationTest(hooks, options) {
12 | upstreamSetupApplicationTest(hooks, options);
13 |
14 | // Additional setup for application tests can be done here.
15 | //
16 | // For example, if you need an authenticated session for each
17 | // application test, you could do:
18 | //
19 | // hooks.beforeEach(async function () {
20 | // await authenticateSession(); // ember-simple-auth
21 | // });
22 | //
23 | // This is also a good place to call test setup functions coming
24 | // from other addons:
25 | //
26 | // setupIntl(hooks); // ember-intl
27 | // setupMirage(hooks); // ember-cli-mirage
28 | }
29 |
30 | function setupRenderingTest(hooks, options) {
31 | upstreamSetupRenderingTest(hooks, options);
32 |
33 | // Additional setup for rendering tests can be done here.
34 | }
35 |
36 | function setupTest(hooks, options) {
37 | upstreamSetupTest(hooks, options);
38 |
39 | // Additional setup for unit tests can be done here.
40 | }
41 |
42 | export { setupApplicationTest, setupRenderingTest, setupTest };
43 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | root: true,
5 | parser: 'babel-eslint',
6 | parserOptions: {
7 | ecmaVersion: 2018,
8 | sourceType: 'module',
9 | },
10 | plugins: ['ember', 'prettier'],
11 | extends: [
12 | 'eslint:recommended',
13 | 'plugin:ember/recommended',
14 | 'plugin:prettier/recommended',
15 | ],
16 | env: {
17 | browser: true,
18 | },
19 | rules: {
20 | 'ember/no-legacy-test-waiters': 'off',
21 | 'ember/no-classic-classes': 'off',
22 | 'ember/no-classic-components': 'off',
23 | 'ember/require-tagless-components': 'off',
24 | 'ember/no-computed-properties-in-native-classes': 'off',
25 | 'ember/no-actions-hash': 'off',
26 | },
27 | overrides: [
28 | // node files
29 | {
30 | files: [
31 | '.eslintrc.js',
32 | '.template-lintrc.js',
33 | '.prettierrc.js',
34 | 'ember-cli-build.js',
35 | 'index.js',
36 | 'testem.js',
37 | 'blueprints/*/index.js',
38 | 'config/**/*.js',
39 | 'tests/dummy/config/**/*.js',
40 | ],
41 | excludedFiles: [
42 | 'addon/**',
43 | 'addon-test-support/**',
44 | 'app/**',
45 | 'tests/helpers/**',
46 | 'tests/dummy/app/**',
47 | ],
48 | parserOptions: {
49 | sourceType: 'script',
50 | },
51 | env: {
52 | browser: false,
53 | node: true,
54 | },
55 | plugins: ['node'],
56 | extends: ['plugin:node/recommended'],
57 | },
58 | ],
59 | };
60 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | name: require('./package').name,
5 |
6 | options: {
7 | autoImport: {
8 | webpack: {
9 | module: {
10 | rules: [
11 | /* fixes issue with graphql-js's mjs entry */
12 | /* see: https://github.com/graphql/graphql-js/issues/1272#issuecomment-393903706 */
13 | {
14 | test: /\.mjs$/,
15 | include: /node_modules\/graphql/,
16 | type: 'javascript/auto',
17 | },
18 | ],
19 | },
20 | },
21 | },
22 | },
23 |
24 | included(app) {
25 | this._super.included.apply(this, arguments);
26 |
27 | this.app = app;
28 | },
29 |
30 | getOptions() {
31 | const hostOptions =
32 | (this.parent && this.parent.options) ||
33 | (this.app && this.app.options) ||
34 | {};
35 |
36 | return (
37 | hostOptions.emberApolloClient || {
38 | keepGraphqlFileExtension: true,
39 | }
40 | );
41 | },
42 |
43 | setupPreprocessorRegistry(type, registry) {
44 | const options = this.getOptions();
45 |
46 | if (type === 'parent') {
47 | registry.add('js', {
48 | name: require('./package').name,
49 | ext: 'graphql',
50 | toTree(tree) {
51 | const GraphQLFilter = require('broccoli-graphql-filter');
52 |
53 | return new GraphQLFilter(tree, {
54 | keepExtension: options.keepGraphqlFileExtension,
55 | });
56 | },
57 | });
58 | }
59 | },
60 | };
61 |
--------------------------------------------------------------------------------
/addon/-private/apollo/setup-hooks.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import Route from '@ember/routing/route';
3 |
4 | const hooks = {
5 | willDestroyElement() {
6 | this.unsubscribeAll(false);
7 | },
8 |
9 | beforeModel() {
10 | this.markSubscriptionsStale();
11 | },
12 |
13 | resetController(_, isExiting) {
14 | this.unsubscribeAll(!isExiting);
15 | },
16 |
17 | willDestroy() {
18 | if (this.unsubscribeAll) {
19 | this.unsubscribeAll(false);
20 | }
21 | },
22 | };
23 |
24 | function installHook(queryManager, context, hookName) {
25 | let hook = hooks[hookName].bind(queryManager);
26 | let originalHook = context[hookName];
27 |
28 | context[hookName] = function () {
29 | if (typeof originalHook === 'function') {
30 | const result = originalHook.call(this, ...arguments);
31 |
32 | if (result instanceof Promise) {
33 | return result.then(() => {
34 | hook.call(queryManager, ...arguments);
35 | });
36 | }
37 | }
38 |
39 | hook.call(queryManager, ...arguments);
40 | };
41 | }
42 |
43 | export default function setupHooks(queryManager, context) {
44 | if (context instanceof Component) {
45 | installHook(queryManager, context, 'willDestroyElement');
46 | } else if (context instanceof Route) {
47 | installHook(queryManager, context, 'beforeModel');
48 | installHook(queryManager, context, 'resetController');
49 | installHook(queryManager, context, 'willDestroy');
50 | } else {
51 | installHook(queryManager, context, 'willDestroy');
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/tests/acceptance/computed-with-watch-query-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { setupApplicationTest } from 'dummy/tests/helpers/setup';
3 | import { addResolveFunctionsToSchema } from 'graphql-tools';
4 | import { click, visit } from '@ember/test-helpers';
5 |
6 | module('Acceptance | computed with watch query', function (hooks) {
7 | setupApplicationTest(hooks);
8 |
9 | const mockMovie = {
10 | id: 238,
11 | popularity: 26.83,
12 | posterPath: '/rPdtLWNsZmAtoZl9PK7S2wE3qiS.jpg',
13 | title: 'The Godfather',
14 | overview:
15 | 'Spanning the years 1945 to 1955, a chronicle of the fictional Italian-American Corleone crime family. When organized crime family patriarch, Vito Corleone barely survives an attempt on his life, his youngest son, Michael steps in to take care of the would-be killers, launching a campaign of bloody revenge.',
16 | releaseDate: '1972-03-15',
17 | __typename: 'Movie',
18 | };
19 |
20 | let schema;
21 |
22 | hooks.beforeEach(function () {
23 | schema = this.pretender.schema;
24 | });
25 |
26 | test('visiting /', async function (assert) {
27 | let resolvers = {
28 | Query: {
29 | movies() {
30 | return [mockMovie];
31 | },
32 | },
33 | };
34 | addResolveFunctionsToSchema({ schema, resolvers });
35 |
36 | await visit('/');
37 |
38 | assert.dom('.movie-title').hasText('The Godfather');
39 | assert.dom('.movie-release-date').hasText('March 15, 1972');
40 |
41 | mockMovie.releaseDate = '2019-09-28';
42 | await click('.refresh-data');
43 |
44 | assert.dom('.movie-release-date').hasText('September 28, 2019');
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/tests/acceptance/mutations-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { setupApplicationTest } from 'dummy/tests/helpers/setup';
3 | import { addResolveFunctionsToSchema } from 'graphql-tools';
4 | import { click, visit, fillIn } from '@ember/test-helpers';
5 |
6 | module('Acceptance | mutations', function (hooks) {
7 | setupApplicationTest(hooks);
8 |
9 | let schema;
10 |
11 | hooks.beforeEach(function () {
12 | schema = this.pretender.schema;
13 | });
14 |
15 | test('creates a review and return data from the mutation', async function (assert) {
16 | assert.expect(2);
17 |
18 | let resolvers = {
19 | Mutation: {
20 | createReview(_, variables) {
21 | assert.deepEqual(
22 | variables,
23 | {
24 | movieId: '123',
25 | review: {
26 | stars: 3,
27 | commentary: "It's a trap!",
28 | },
29 | },
30 | 'it passes in the mutation variables'
31 | );
32 | return {
33 | movieId: '123',
34 | stars: 3,
35 | commentary: "It's a trap",
36 | };
37 | },
38 | },
39 | };
40 | addResolveFunctionsToSchema({ schema, resolvers });
41 |
42 | await visit('/new-review');
43 |
44 | await fillIn('.movie-id', '123');
45 | await fillIn('.review-stars', '3');
46 | await fillIn('.review-commentary', "It's a trap!");
47 |
48 | await click('.create-review-button');
49 |
50 | assert
51 | .dom('.create-review-response')
52 | .hasText(
53 | '{"createReview":{"stars":3,"commentary":"It\'s a trap","__typename":"Review"}}'
54 | );
55 | });
56 | });
57 |
--------------------------------------------------------------------------------
/tests/dummy/app/utils/graphql-type-query.js:
--------------------------------------------------------------------------------
1 | export default {
2 | __schema: {
3 | types: [
4 | {
5 | kind: 'UNION',
6 | name: 'SearchResult',
7 | possibleTypes: [
8 | {
9 | name: 'Droid',
10 | },
11 | {
12 | name: 'Human',
13 | },
14 | {
15 | name: 'Starship',
16 | },
17 | ],
18 | },
19 | {
20 | kind: 'OBJECT',
21 | name: 'Droid',
22 | possibleTypes: null,
23 | },
24 | {
25 | kind: 'OBJECT',
26 | name: 'Human',
27 | possibleTypes: null,
28 | },
29 | {
30 | kind: 'OBJECT',
31 | name: 'Starship',
32 | possibleTypes: null,
33 | },
34 | {
35 | kind: 'OBJECT',
36 | name: '__Schema',
37 | possibleTypes: null,
38 | },
39 | {
40 | kind: 'OBJECT',
41 | name: '__Type',
42 | possibleTypes: null,
43 | },
44 | {
45 | kind: 'ENUM',
46 | name: '__TypeKind',
47 | possibleTypes: null,
48 | },
49 | {
50 | kind: 'OBJECT',
51 | name: '__Field',
52 | possibleTypes: null,
53 | },
54 | {
55 | kind: 'OBJECT',
56 | name: '__InputValue',
57 | possibleTypes: null,
58 | },
59 | {
60 | kind: 'OBJECT',
61 | name: '__EnumValue',
62 | possibleTypes: null,
63 | },
64 | {
65 | kind: 'OBJECT',
66 | name: '__Directive',
67 | possibleTypes: null,
68 | },
69 | {
70 | kind: 'ENUM',
71 | name: '__DirectiveLocation',
72 | possibleTypes: null,
73 | },
74 | ],
75 | },
76 | };
77 |
--------------------------------------------------------------------------------
/config/ember-try.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const getChannelURL = require('ember-source-channel-url');
4 | const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup');
5 |
6 | module.exports = async function () {
7 | return {
8 | useYarn: true,
9 | scenarios: [
10 | {
11 | name: 'ember-lts-4.4',
12 | npm: {
13 | devDependencies: {
14 | 'ember-source': '~4.4.0',
15 | },
16 | },
17 | },
18 | {
19 | name: 'ember-lts-4.8',
20 | npm: {
21 | devDependencies: {
22 | 'ember-source': '~4.8.0',
23 | },
24 | },
25 | },
26 | {
27 | name: 'ember-lts-4.12',
28 | npm: {
29 | devDependencies: {
30 | 'ember-source': '~4.12.0',
31 | },
32 | },
33 | },
34 | {
35 | name: 'ember-lts-5.4',
36 | npm: {
37 | devDependencies: {
38 | 'ember-source': '~5.4.0',
39 | },
40 | },
41 | },
42 | {
43 | name: 'ember-lts-5.8',
44 | npm: {
45 | devDependencies: {
46 | 'ember-source': '~5.8.0',
47 | },
48 | },
49 | },
50 | {
51 | name: 'ember-release',
52 | npm: {
53 | devDependencies: {
54 | 'ember-source': await getChannelURL('release'),
55 | },
56 | },
57 | },
58 | {
59 | name: 'ember-beta',
60 | npm: {
61 | devDependencies: {
62 | 'ember-source': await getChannelURL('beta'),
63 | },
64 | },
65 | },
66 | {
67 | name: 'ember-canary',
68 | npm: {
69 | devDependencies: {
70 | 'ember-source': await getChannelURL('canary'),
71 | },
72 | },
73 | },
74 | embroiderSafe(),
75 | embroiderOptimized(),
76 | ],
77 | };
78 | };
79 |
--------------------------------------------------------------------------------
/tests/unit/build/graphql-filter-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import gql from 'graphql-tag';
3 |
4 | import testFragment from './test-fragment';
5 | import testQuery from './test-query';
6 | import testQueryWithNestedFragments from './test-query-with-nested-fragment';
7 | import testSubscription from './test-subscription';
8 |
9 | module('Unit | graphql-filter', function () {
10 | function testCompilation(description, { actual, expected }) {
11 | test(description, function (assert) {
12 | assert.deepEqual(
13 | actual.definitions,
14 | JSON.parse(JSON.stringify(expected.definitions))
15 | );
16 | });
17 | }
18 |
19 | testCompilation('simple compilation', {
20 | actual: testFragment,
21 | expected: gql`
22 | fragment testFragment on Object {
23 | name
24 | }
25 | `,
26 | });
27 |
28 | testCompilation('simple subscription compilation', {
29 | actual: testSubscription,
30 | expected: gql`
31 | subscription TestSubscription {
32 | subject {
33 | name
34 | }
35 | }
36 | `,
37 | });
38 |
39 | testCompilation('compilation with #import references', {
40 | actual: testQuery,
41 | expected: gql`
42 | query TestQuery {
43 | subject {
44 | ...testFragment
45 | }
46 | }
47 |
48 | fragment testFragment on Object {
49 | name
50 | }
51 | `,
52 | });
53 |
54 | testCompilation('compilation with nested fragments', {
55 | actual: testQueryWithNestedFragments,
56 | expected: gql`
57 | query TestQueryWithNestedFragment {
58 | subject {
59 | ...testFragmentWithFragment
60 | ...testFragment
61 | }
62 | }
63 |
64 | fragment testFragment on Object {
65 | name
66 | }
67 |
68 | fragment testFragmentWithFragment on Object {
69 | ...testFragment
70 | }
71 | `,
72 | });
73 | });
74 |
--------------------------------------------------------------------------------
/tests/dummy/app/styles/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Roboto', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Oxygen',
3 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
4 | 'Helvetica', 'Arial', sans-serif;
5 | }
6 |
7 | .movie-list {
8 | display: flex;
9 | flex-wrap: wrap;
10 | }
11 |
12 | .actions-menu {
13 | text-align: right;
14 | margin-bottom: 3rem;
15 | }
16 |
17 | .button {
18 | display: inline-block;
19 | border: none;
20 | padding: 1rem 2rem;
21 | margin: 0 0.25rem;
22 | text-decoration: none;
23 | background: #0069ed;
24 | color: #ffffff;
25 | font-family: sans-serif;
26 | font-size: 1rem;
27 | cursor: pointer;
28 | text-align: center;
29 | transition: background 250ms ease-in-out, transform 150ms ease;
30 | -webkit-appearance: none;
31 | -moz-appearance: none;
32 | }
33 |
34 | .button:hover,
35 | .button:focus {
36 | background: #0053ba;
37 | }
38 |
39 | .movie-list .item {
40 | display: flex;
41 | max-width: 33rem;
42 | box-sizing: border-box;
43 | margin: 0.75rem;
44 | }
45 |
46 | .movie-list .poster img {
47 | display: block;
48 | width: 8.75rem;
49 | height: 13.125rem;
50 | }
51 |
52 | .card {
53 | box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
54 | background-color: #fff;
55 | }
56 |
57 | .movie-list .info {
58 | padding: 0.75rem;
59 | }
60 |
61 | .movie-list .movie-title {
62 | width: 100%;
63 | font-weight: bold;
64 | font-size: 1.3rem;
65 | color: #000;
66 | text-decoration: none;
67 | }
68 |
69 | .movie-list .movie-release-date {
70 | font-size: 0.75rem;
71 | }
72 |
73 | .movie-overview {
74 | color: #888;
75 | font-size: 0.9em;
76 | line-height: 1.4em;
77 | }
78 |
79 | .movie-vote-average {
80 | color: #888;
81 | font-size: 0.75em;
82 | font-style: italic;
83 | }
84 |
85 | .movie-detail {
86 | margin-top: 3rem;
87 | display: flex;
88 | }
89 |
90 | .movie-detail .info {
91 | padding: 0 0.75rem;
92 | }
93 |
94 | .movie-detail .movie-title {
95 | font-weight: bold;
96 | font-size: 2.5rem;
97 | color: #000;
98 | }
99 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 | - 'v*'
8 | pull_request: {}
9 |
10 | concurrency:
11 | group: ci-${{ github.head_ref || github.ref }}
12 | cancel-in-progress: true
13 |
14 | jobs:
15 | test:
16 | name: Tests
17 | runs-on: ubuntu-latest
18 | timeout-minutes: 10
19 |
20 | env:
21 | CI: 'true'
22 |
23 | steps:
24 | - uses: actions/checkout@v3
25 | - name: Install Node
26 | uses: actions/setup-node@v3
27 | with:
28 | node-version: 20.x
29 | cache: yarn
30 | - name: Install Dependencies
31 | run: yarn install --frozen-lockfile
32 | - name: Lint
33 | run: yarn lint
34 | - name: Run Tests
35 | run: yarn test:ember
36 |
37 | floating:
38 | name: "Floating Dependencies"
39 | runs-on: ubuntu-latest
40 | timeout-minutes: 10
41 |
42 | steps:
43 | - uses: actions/checkout@v3
44 | - uses: actions/setup-node@v3
45 | with:
46 | node-version: 20.x
47 | cache: yarn
48 | - name: Install Dependencies
49 | run: yarn install --no-lockfile
50 | - name: Run Tests
51 | run: yarn test:ember
52 |
53 | try-scenarios:
54 | name: Tests ${{ matrix.ember-try-scenario }}
55 | runs-on: ubuntu-latest
56 | needs: test
57 |
58 | env:
59 | CI: 'true'
60 |
61 |
62 | timeout-minutes: 10
63 |
64 | strategy:
65 | fail-fast: true
66 | matrix:
67 | try-scenario:
68 | #- ember-lts-4.4
69 | - ember-lts-4.8
70 | - ember-lts-4.12
71 | - ember-lts-5.4
72 | - ember-lts-5.8
73 | #- ember-release
74 | #- ember-beta
75 | #- ember-canary
76 | - embroider-safe
77 | - embroider-optimized
78 |
79 | steps:
80 | - uses: actions/checkout@v3
81 | - name: Install Node
82 | uses: actions/setup-node@v3
83 | with:
84 | node-version: 20.x
85 | cache: yarn
86 | - name: Install Dependencies
87 | run: yarn install --frozen-lockfile
88 | - name: Run Tests
89 | run: ./node_modules/.bin/ember try:one ${{ matrix.try-scenario }}
90 |
--------------------------------------------------------------------------------
/tests/acceptance/array-watch-query-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { setupApplicationTest } from 'dummy/tests/helpers/setup';
3 | import { addResolveFunctionsToSchema } from 'graphql-tools';
4 | import { click, currentURL, findAll, visit } from '@ember/test-helpers';
5 |
6 | const mockMovies = [
7 | {
8 | id: 680,
9 | title: 'Pulp Fiction',
10 | popularity: 30.437,
11 | posterPath: '/dM2w364MScsjFf8pfMbaWUcWrR.jpg',
12 | overview: 'Lorem ipsum',
13 | releaseDate: '1994-10-14',
14 | __typename: 'Movie',
15 | },
16 | ];
17 |
18 | module('Acceptance | array watchQuery', function (hooks) {
19 | setupApplicationTest(hooks);
20 |
21 | let schema;
22 |
23 | hooks.beforeEach(function () {
24 | schema = this.pretender.schema;
25 | });
26 |
27 | test('should re-render updating an array using watchQuery', async function (assert) {
28 | let resolvers = {
29 | Query: {
30 | movies(/*obj, args*/) {
31 | return new Promise((resolve) => {
32 | setTimeout(() => {
33 | resolve(mockMovies);
34 | }, 200);
35 | });
36 | },
37 | },
38 | };
39 |
40 | addResolveFunctionsToSchema({ schema, resolvers });
41 |
42 | await visit('/');
43 | assert.equal(currentURL(), '/');
44 |
45 | assert.dom('.movie-list .item').exists({ count: 1 }, 'has one item');
46 | assert.dom('.movie-overview').hasText('Lorem ipsum');
47 |
48 | mockMovies[0].overview = 'Updated overview';
49 | mockMovies.push({
50 | id: 13,
51 | title: 'Forrest Gump',
52 | popularity: 31.962,
53 | posterPath: '/yE5d3BUhE8hCnkMUJOo1QDoOGNz.jpg',
54 | overview: 'lorem',
55 | releaseDate: '1994-07-06',
56 | });
57 |
58 | await click('.refresh-data');
59 | assert
60 | .dom('.movie-list .item')
61 | .exists({ count: 2 }, 'should have updated the list');
62 |
63 | assert.equal(
64 | findAll('.movie-overview')[0].innerText,
65 | 'Updated overview',
66 | 'has correct updated overview'
67 | );
68 |
69 | assert.equal(
70 | findAll('.movie-overview')[1].innerText,
71 | 'lorem',
72 | 'has correct overview for new data'
73 | );
74 | });
75 | });
76 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ember-apollo-client",
3 | "version": "5.0.0",
4 | "description": "An ember-cli addon for the Apollo GraphQL Client.",
5 | "keywords": [
6 | "apollo",
7 | "apollo-client",
8 | "ember",
9 | "ember-addon",
10 | "graphql",
11 | "graphql-client"
12 | ],
13 | "repository": "https://github.com/ember-graphql/ember-apollo-client",
14 | "license": "MIT",
15 | "author": "Blake Gentry",
16 | "maintainers": [
17 | {
18 | "name": "Josemar Luedke",
19 | "email": "josemarluedke@gmail.com",
20 | "url": "https://github.com/josemarluedke"
21 | }
22 | ],
23 | "directories": {
24 | "doc": "doc",
25 | "test": "tests"
26 | },
27 | "scripts": {
28 | "build": "ember build --environment=production",
29 | "lint": "npm-run-all --print-name --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
30 | "lint:fix": "npm-run-all --print-name --aggregate-output --continue-on-error --parallel \"lint:*:fix\"",
31 | "lint:hbs": "ember-template-lint .",
32 | "lint:hbs:fix": "ember-template-lint . --fix",
33 | "lint:js": "eslint . --cache",
34 | "lint:js:fix": "eslint . --fix",
35 | "start": "ember serve",
36 | "test": "npm-run-all --print-name \"lint\" \"test:*\"",
37 | "test:ember": "ember test"
38 | },
39 | "dependencies": {
40 | "@apollo/client": "^3.5.10",
41 | "@ember/string": "^3.1.1",
42 | "@ember/test-waiters": "^4.1.0",
43 | "@embroider/macros": "^1.18.0",
44 | "@glimmer/tracking": "^1.1.2",
45 | "broccoli-graphql-filter": "^1.0.0",
46 | "ember-auto-import": "^2.4.3",
47 | "ember-cli-babel": "^7.26.11"
48 | },
49 | "devDependencies": {
50 | "@babel/core": "^7.17.7",
51 | "@ember/optional-features": "^2.0.0",
52 | "@ember/test-helpers": "^4.0.4",
53 | "@embroider/test-setup": "^3.0.3",
54 | "@glimmer/component": "^1.1.2",
55 | "babel-eslint": "^10.1.0",
56 | "broccoli-asset-rev": "^3.0.0",
57 | "ember-cli": "~4.8.1",
58 | "ember-cli-dependency-checker": "^3.3.1",
59 | "ember-cli-htmlbars": "^6.1.1",
60 | "ember-cli-inject-live-reload": "^2.1.0",
61 | "ember-cli-terser": "^4.0.2",
62 | "ember-compatibility-helpers": "^1.2.6",
63 | "ember-disable-prototype-extensions": "^1.1.3",
64 | "ember-load-initializers": "^2.1.2",
65 | "ember-page-title": "^7.0.0",
66 | "ember-qunit": "^8.1.1",
67 | "ember-resolver": "^8.0.3",
68 | "ember-source": "~4.8.0",
69 | "ember-source-channel-url": "^3.0.0",
70 | "ember-template-lint": "^4.16.1",
71 | "ember-try": "^3.0.0",
72 | "eslint": "^7.32.0",
73 | "eslint-config-prettier": "^8.5.0",
74 | "eslint-plugin-ember": "^11.1.0",
75 | "eslint-plugin-node": "^11.1.0",
76 | "eslint-plugin-prettier": "^4.2.1",
77 | "eslint-plugin-qunit": "^7.3.1",
78 | "minimatch": "^5.1.6",
79 | "glob": "^7.1.7",
80 | "graphql": "^16.0.0",
81 | "graphql-tag": "^2.12.6",
82 | "graphql-tools": "^4.0.8",
83 | "loader.js": "^4.7.0",
84 | "npm-run-all": "^4.1.5",
85 | "pretender": "^3.4.7",
86 | "prettier": "^2.7.1",
87 | "qunit": "^2.19.2",
88 | "qunit-dom": "^2.0.0",
89 | "webpack": "^5.74.0"
90 | },
91 | "peerDependencies": {
92 | "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"
93 | },
94 | "engines": {
95 | "node": ">= 20"
96 | },
97 | "ember": {
98 | "edition": "octane"
99 | },
100 | "ember-addon": {
101 | "configPath": "tests/dummy/config",
102 | "before": [
103 | "ember-cli-babel"
104 | ]
105 | }
106 | }
107 |
--------------------------------------------------------------------------------
/tests/unit/-private/query-manager-macro-decorator-test.js:
--------------------------------------------------------------------------------
1 | import EmberObject from '@ember/object';
2 | import { queryManager, QueryManager } from 'ember-apollo-client';
3 | import { module, test } from 'qunit';
4 | import { setupTest } from 'ember-qunit';
5 | import ApolloService from 'ember-apollo-client/services/apollo';
6 | import { gte } from 'ember-compatibility-helpers';
7 |
8 | class OverriddenApollo extends ApolloService {}
9 |
10 | let TestObject;
11 |
12 | module('Unit | queryManager | macro - decorator', function (hooks) {
13 | setupTest(hooks);
14 |
15 | hooks.beforeEach(function () {
16 | this.owner.register('service:overridden-apollo', OverriddenApollo);
17 |
18 | this.subject = function () {
19 | this.owner.register('test-container:test-object', TestObject);
20 | return this.owner.lookup('test-container:test-object');
21 | };
22 | });
23 |
24 | test('it works in a regular ember object', function (assert) {
25 | TestObject = EmberObject.extend({
26 | apollo: queryManager({ service: 'overridden-apollo' }),
27 | });
28 |
29 | let subject = this.subject();
30 | assert.ok(subject.apollo, 'should create a apollo property');
31 | assert.ok(
32 | subject.apollo instanceof QueryManager,
33 | 'it should be an instance of the query manager'
34 | );
35 | assert.ok(
36 | subject.apollo.apollo instanceof OverriddenApollo,
37 | 'the apollo service should be an instance of the overridden apollo service'
38 | );
39 | });
40 |
41 | if (gte('3.10.0')) {
42 | test('it works using decorator syntax without options', function (assert) {
43 | TestObject = class MyTestClassObject extends EmberObject {
44 | @queryManager apollo;
45 | };
46 |
47 | let subject = this.subject();
48 | assert.ok(subject.apollo, 'should create a apollo property');
49 | assert.ok(
50 | subject.apollo instanceof QueryManager,
51 | 'it should be an instance of the query manager'
52 | );
53 | assert.ok(
54 | subject.apollo.apollo instanceof ApolloService,
55 | 'it should be an instance of the apollo service'
56 | );
57 | });
58 |
59 | test('it works using decorator syntax with options', function (assert) {
60 | TestObject = class MyTestClassObject extends EmberObject {
61 | @queryManager({ service: 'overridden-apollo' }) apollo;
62 | };
63 |
64 | let subject = this.subject();
65 | assert.ok(subject.apollo, 'should create a apollo property');
66 | assert.ok(
67 | subject.apollo instanceof QueryManager,
68 | 'it should be an instance of the query manager'
69 | );
70 | assert.ok(
71 | subject.apollo.apollo instanceof OverriddenApollo,
72 | 'the apollo service should be an instance of the overridden apollo service'
73 | );
74 | });
75 |
76 | test('it works using the `defaultQueryManagerService` environment option', function (assert) {
77 | const config = this.owner.resolveRegistration('config:environment');
78 |
79 | config.apollo.defaultQueryManagerService = 'overridden-apollo';
80 |
81 | TestObject = class MyTestClassObject extends EmberObject {
82 | @queryManager apollo;
83 | };
84 |
85 | let subject = this.subject();
86 |
87 | assert.ok(subject.apollo, 'should create an apollo property');
88 |
89 | assert.true(
90 | subject.apollo instanceof QueryManager,
91 | 'it should be an instance of the query manager'
92 | );
93 |
94 | assert.true(
95 | subject.apollo.apollo instanceof OverriddenApollo,
96 | 'the apollo service should be an instance of the overridden apollo service'
97 | );
98 |
99 | delete config.apollo.defaultQueryManagerService;
100 | });
101 | }
102 | });
103 |
--------------------------------------------------------------------------------
/tests/unit/-private/query-manager-hooks-object-test.js:
--------------------------------------------------------------------------------
1 | import EmberObject from '@ember/object';
2 | import { queryManager } from 'ember-apollo-client';
3 | import { module, test } from 'qunit';
4 | import { setupTest } from 'ember-qunit';
5 | import ApolloService from 'ember-apollo-client/services/apollo';
6 | import { gte } from 'ember-compatibility-helpers';
7 |
8 | let TestObject;
9 | let unsubscribeCalled;
10 | let assertDeepEqual;
11 |
12 | let OverriddenApollo = class extends ApolloService {
13 | managedWatchQuery(manager, opts) {
14 | assertDeepEqual(opts, { query: 'fakeQuery' });
15 |
16 | manager.trackSubscription({
17 | unsubscribe() {
18 | unsubscribeCalled++;
19 | },
20 | });
21 | }
22 |
23 | managedSubscribe(manager, opts) {
24 | assertDeepEqual(opts, { query: 'fakeSubscription' });
25 |
26 | manager.trackSubscription({
27 | unsubscribe() {
28 | unsubscribeCalled++;
29 | },
30 | });
31 | }
32 | };
33 |
34 | module('Unit | queryManager | Setup Hooks in EmberOject', function (hooks) {
35 | setupTest(hooks);
36 |
37 | hooks.beforeEach(function (assert) {
38 | assertDeepEqual = assert.deepEqual.bind(assert);
39 | unsubscribeCalled = 0;
40 |
41 | this.subject = function () {
42 | this.owner.register('service:overridden-apollo', OverriddenApollo);
43 | this.owner.register('test-container:test-object', TestObject);
44 | return this.owner.lookup('test-container:test-object');
45 | };
46 | });
47 |
48 | test('it unsubscribes from any watchQuery subscriptions', function (assert) {
49 | assert.expect(6);
50 |
51 | TestObject = EmberObject.extend({
52 | apollo: queryManager({ service: 'overridden-apollo' }),
53 | willDestroy() {
54 | assert.ok(true, 'Should have called the original willDestroy');
55 | },
56 | });
57 |
58 | let subject = this.subject();
59 | assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
60 |
61 | subject.apollo.watchQuery({ query: 'fakeQuery' });
62 | subject.apollo.watchQuery({ query: 'fakeQuery' });
63 |
64 | subject.willDestroy();
65 |
66 | assert.equal(
67 | unsubscribeCalled,
68 | 2,
69 | '_apolloUnsubscribe() was called once per watchQuery'
70 | );
71 | });
72 |
73 | test('it unsubscribes from any subscriptions', async function (assert) {
74 | TestObject = EmberObject.extend({
75 | apollo: queryManager({ service: 'overridden-apollo' }),
76 | });
77 |
78 | let subject = this.subject();
79 | assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
80 |
81 | subject.apollo.subscribe({ query: 'fakeSubscription' });
82 | subject.apollo.subscribe({ query: 'fakeSubscription' });
83 |
84 | subject.willDestroy();
85 |
86 | assert.equal(
87 | unsubscribeCalled,
88 | 2,
89 | '_apolloUnsubscribe() was called once per subscribe'
90 | );
91 | });
92 |
93 | if (gte('3.10.0')) {
94 | test('it works using decorator syntax', function (assert) {
95 | assert.expect(6);
96 | TestObject = class MyTestClassObject extends EmberObject {
97 | @queryManager({ service: 'overridden-apollo' }) apollo;
98 |
99 | willDestroy() {
100 | assert.ok(true, 'Should have called the original willDestroy');
101 | }
102 | };
103 |
104 | let subject = this.subject();
105 | assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
106 |
107 | subject.apollo.watchQuery({ query: 'fakeQuery' });
108 | subject.apollo.watchQuery({ query: 'fakeQuery' });
109 |
110 | subject.willDestroy();
111 |
112 | assert.equal(
113 | unsubscribeCalled,
114 | 2,
115 | '_apolloUnsubscribe() was called once per watchQuery'
116 | );
117 | });
118 | }
119 | });
120 |
--------------------------------------------------------------------------------
/tests/helpers/start-pretender.js:
--------------------------------------------------------------------------------
1 | import RSVP from 'rsvp';
2 | import Pretender from 'pretender';
3 | import { graphql } from 'graphql';
4 | import {
5 | addMockFunctionsToSchema,
6 | addResolveFunctionsToSchema,
7 | makeExecutableSchema,
8 | } from 'graphql-tools';
9 | import schemaString from 'dummy/schema';
10 |
11 | const interfaceResolveType = {
12 | __resolveType(data) {
13 | // Explicitly resolve the type of any interface type based on the
14 | // special attribute __typename, which should be provided in mocks of
15 | // these types. Otherwise fallback to the data.typename.name, which
16 | // comes from built-in mocks.
17 | return data.__typename || data.typename.name;
18 | },
19 | };
20 |
21 | const __resolveType = ({ type }) => type;
22 |
23 | export default function startPretender() {
24 | let resolvers = {
25 | // This is where you would declare custom resolvers. For example, assume we
26 | // had a custom ID type:
27 | //
28 | // IDType: {
29 | // __parseValue(value) {
30 | // return value;
31 | // },
32 | // __serialize(value) {
33 | // return value;
34 | // },
35 | // __parseLiteral(ast) {
36 | // return ast.value;
37 | // }
38 | // },
39 |
40 | // We set up __resolveType for this interface type here, then it is inherited
41 | // when we build the schema:
42 | SearchResult: { __resolveType },
43 | };
44 | let typeResolvers = {
45 | // This is where you can declare custom type resolvers, such as those
46 | // necessary to infer the specific object type of a union type.
47 |
48 | // We use this interface type in test mocks, need to teach Apollo Client how
49 | // to resolve its type:
50 | SearchResult: interfaceResolveType,
51 | };
52 | let mocks = {
53 | // This is where you tell graphql-tools how to generate a mock for a custom
54 | // scalar type:
55 | //
56 | // Time() {
57 | // return moment().utc().format('YYYY-MM-DDTHH:mm:ss.SSSZ');
58 | // }
59 |
60 | Date() {
61 | return '2019-09-28';
62 | },
63 | };
64 |
65 | let schema = makeExecutableSchema({ typeDefs: schemaString, resolvers });
66 | addResolveFunctionsToSchema({
67 | schema,
68 | resolvers: typeResolvers,
69 | inheritResolversFromInterfaces: true,
70 | });
71 | addMockFunctionsToSchema({ schema, mocks, preserveResolvers: true });
72 |
73 | let pretender = new Pretender(function () {
74 | this.unhandledRequest = function (verb, path) {
75 | path = decodeURI(path);
76 | throw `Your Ember app tried to ${verb} '${path}', but there was no route defined to handle this request.`;
77 | };
78 | });
79 |
80 | // overriding fetch is required in order to make apollo-client work w/ pretender:
81 | // https://github.com/pretenderjs/pretender/issues/60
82 | // https://github.com/apollostack/apollo-client/issues/269
83 | pretender._ogFetch = window.fetch;
84 | window.fetch = fetch;
85 |
86 | pretender.originalShutdown = pretender.shutdown;
87 | pretender.shutdown = function () {
88 | window.fetch = pretender._ogFetch;
89 | pretender.originalShutdown(...arguments);
90 | };
91 |
92 | pretender.schema = schema;
93 |
94 | pretender.post('https://test.example/graphql', function (request) {
95 | let body = JSON.parse(request.requestBody);
96 | return new RSVP.Promise((resolve) => {
97 | graphql({
98 | schema,
99 | source: body.query,
100 | variableValues: body.variables,
101 | }).then((result) => {
102 | if (result.errors && result.errors.length > 0) {
103 | console.log('ERROR:', result.errors[0]); // eslint-disable-line no-console
104 | debugger; // eslint-disable-line no-debugger
105 | }
106 | let resultStr = JSON.stringify(result);
107 | resolve([200, { 'content-type': 'application/javascript' }, resultStr]);
108 | });
109 | });
110 | });
111 |
112 | return pretender;
113 | }
114 |
--------------------------------------------------------------------------------
/tests/unit/-private/query-manager-hooks-component-test.js:
--------------------------------------------------------------------------------
1 | import EmberComponent from '@ember/component';
2 | import { queryManager } from 'ember-apollo-client';
3 | import { module, test } from 'qunit';
4 | import { setupTest } from 'ember-qunit';
5 | import ApolloService from 'ember-apollo-client/services/apollo';
6 | import { gte } from 'ember-compatibility-helpers';
7 |
8 | let TestObject;
9 | let unsubscribeCalled;
10 | let assertDeepEqual;
11 |
12 | let OverriddenApollo = class extends ApolloService {
13 | managedWatchQuery(manager, opts) {
14 | assertDeepEqual(opts, { query: 'fakeQuery' });
15 |
16 | manager.trackSubscription({
17 | unsubscribe() {
18 | unsubscribeCalled++;
19 | },
20 | });
21 | }
22 |
23 | managedSubscribe(manager, opts) {
24 | assertDeepEqual(opts, { query: 'fakeSubscription' });
25 |
26 | manager.trackSubscription({
27 | unsubscribe() {
28 | unsubscribeCalled++;
29 | },
30 | });
31 | }
32 | };
33 |
34 | module(
35 | 'Unit | queryManager | Setup Hooks in Ember Components',
36 | function (hooks) {
37 | setupTest(hooks);
38 |
39 | hooks.beforeEach(function (assert) {
40 | assertDeepEqual = assert.deepEqual.bind(assert);
41 | unsubscribeCalled = 0;
42 |
43 | this.subject = function () {
44 | this.owner.register('service:overridden-apollo', OverriddenApollo);
45 | this.owner.register('component:test-component', TestObject);
46 | return this.owner.lookup('component:test-component');
47 | };
48 | });
49 |
50 | test('it unsubscribes from any watchQuery subscriptions', function (assert) {
51 | assert.expect(5);
52 |
53 | TestObject = EmberComponent.extend({
54 | apollo: queryManager({ service: 'overridden-apollo' }),
55 | willDestroyElement() {
56 | assert.ok(true, 'Should have called the original willDestroyElement');
57 | },
58 | });
59 |
60 | let subject = this.subject();
61 | assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
62 |
63 | subject.apollo.watchQuery({ query: 'fakeQuery' });
64 | subject.apollo.watchQuery({ query: 'fakeQuery' });
65 |
66 | subject.willDestroyElement();
67 |
68 | assert.equal(
69 | unsubscribeCalled,
70 | 2,
71 | '_apolloUnsubscribe() was called once per watchQuery'
72 | );
73 | });
74 |
75 | test('it unsubscribes from any subscriptions', async function (assert) {
76 | TestObject = EmberComponent.extend({
77 | apollo: queryManager({ service: 'overridden-apollo' }),
78 | });
79 |
80 | let subject = this.subject();
81 | assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
82 |
83 | subject.apollo.subscribe({ query: 'fakeSubscription' });
84 | subject.apollo.subscribe({ query: 'fakeSubscription' });
85 |
86 | subject.willDestroyElement();
87 |
88 | assert.equal(
89 | unsubscribeCalled,
90 | 2,
91 | '_apolloUnsubscribe() was called once per subscribe'
92 | );
93 | });
94 |
95 | if (gte('3.10.0')) {
96 | test('it works using decorator syntax', function (assert) {
97 | assert.expect(5);
98 | TestObject = class MyTestClassObject extends EmberComponent {
99 | @queryManager({ service: 'overridden-apollo' }) apollo;
100 |
101 | willDestroyElement() {
102 | assert.ok(
103 | true,
104 | 'Should have called the original willDestroyElement'
105 | );
106 | }
107 | };
108 |
109 | let subject = this.subject();
110 | assert.equal(
111 | unsubscribeCalled,
112 | 0,
113 | 'should have been initialized with 0'
114 | );
115 |
116 | subject.apollo.watchQuery({ query: 'fakeQuery' });
117 | subject.apollo.watchQuery({ query: 'fakeQuery' });
118 |
119 | subject.willDestroyElement();
120 |
121 | assert.equal(
122 | unsubscribeCalled,
123 | 2,
124 | '_apolloUnsubscribe() was called once per watchQuery'
125 | );
126 | });
127 | }
128 | }
129 | );
130 |
--------------------------------------------------------------------------------
/tests/acceptance/query-and-unsubscribe-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { setupApplicationTest } from 'dummy/tests/helpers/setup';
3 | import { addResolveFunctionsToSchema } from 'graphql-tools';
4 | import { click, currentURL, visit } from '@ember/test-helpers';
5 |
6 | module('Acceptance | main', function (hooks) {
7 | setupApplicationTest(hooks);
8 |
9 | const mockMovieNotTop = {
10 | id: 680,
11 | title: 'Pulp Fiction',
12 | voteAverage: 8.4,
13 | posterPath: '/dM2w364MScsjFf8pfMbaWUcWrR.jpg',
14 | overview: 'lorem',
15 | releaseDate: '1994-10-14',
16 | };
17 |
18 | const mockMovieTopRated = {
19 | id: 238,
20 | title: 'The Godfather',
21 | voteAverage: 8.6,
22 | posterPath: '/rPdtLWNsZmAtoZl9PK7S2wE3qiS.jpg',
23 | overview: 'lorem',
24 | releaseDate: '1972-03-15',
25 | };
26 |
27 | test('visiting /movie/id', async function (assert) {
28 | let movie = Object.assign({}, mockMovieNotTop);
29 | let resolvers = {
30 | Query: {
31 | movie(obj, args) {
32 | assert.deepEqual(args, { id: '680' });
33 | return Object.assign({}, movie);
34 | },
35 | },
36 | };
37 | addResolveFunctionsToSchema({ schema: this.pretender.schema, resolvers });
38 |
39 | let apollo = this.owner.lookup('service:apollo');
40 | let getQueries = () => apollo.client.queryManager.getQueryStore();
41 |
42 | await visit('/movie/680');
43 |
44 | assert.equal(currentURL(), '/movie/680');
45 | assert.dom('.movie-title').hasText('Pulp Fiction');
46 |
47 | // try updating the mock, refetching the result (w/ query), and ensuring
48 | // that there are no errors:
49 | movie.title = 'Rambo: Last Blood';
50 | await click('.refresh-data');
51 |
52 | assert.dom('.movie-title').hasText('Rambo: Last Blood');
53 | // Because we used watchQuery() there should be an ongoing query in the
54 | // apollo query manager:
55 | let queries = getQueries();
56 | assert.ok(Object.keys(queries).length, 'there is an active watchQuery');
57 |
58 | await click('.add-review');
59 |
60 | // Now that we've gone to a route with no queries, the RouteQueryManager
61 | // should have unsubscribed from the watchQuery and there should be no
62 | // ongoing queries:
63 | queries = getQueries();
64 | assert.notOk(
65 | Object.keys(queries).length,
66 | 'there are no active watchQueries'
67 | );
68 | });
69 |
70 | test('visiting /', async function (assert) {
71 | let firstQuery = true;
72 | let resolvers = {
73 | Query: {
74 | movies(_, args) {
75 | if (firstQuery) {
76 | firstQuery = false;
77 | assert.deepEqual(args, { topRated: false });
78 | return [mockMovieNotTop];
79 | }
80 |
81 | assert.deepEqual(args, { topRated: true });
82 | return [mockMovieTopRated];
83 | },
84 | },
85 | };
86 | addResolveFunctionsToSchema({ schema: this.pretender.schema, resolvers });
87 |
88 | let apollo = this.owner.lookup('service:apollo');
89 | let getQueries = () => apollo.client.queryManager.getQueryStore();
90 |
91 | await visit('/');
92 |
93 | assert.dom('.movie-title').hasText(mockMovieNotTop.title);
94 |
95 | // Because we used watchQuery() there should be an ongoing query in the
96 | // apollo query manager:
97 | let queries = getQueries();
98 | assert.equal(
99 | Object.keys(queries).length,
100 | 1,
101 | 'there is an active watchQuery'
102 | );
103 | assert.deepEqual(queries[Object.keys(queries)[0]].variables, {
104 | topRated: false,
105 | });
106 |
107 | await click('.toggle-top-rated');
108 | assert.equal(currentURL(), '/?topRated=true');
109 | assert.dom('.movie-title').hasText(mockMovieTopRated.title);
110 |
111 | // Since we changed the query topRated from 'false' to 'true', a new
112 | // watchQuery should have been fetched referencing 'topRated'. It should
113 | // still be active, while the 'topRated false' query should not.
114 | queries = getQueries();
115 | assert.equal(
116 | Object.keys(queries).length,
117 | 1,
118 | 'there is an active watchQuery'
119 | );
120 | assert.deepEqual(queries[Object.keys(queries)[0]].variables, {
121 | topRated: true,
122 | });
123 | });
124 | });
125 |
--------------------------------------------------------------------------------
/tests/acceptance/watch-query-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { setupApplicationTest } from 'dummy/tests/helpers/setup';
3 | import { addResolveFunctionsToSchema } from 'graphql-tools';
4 | import { click, currentURL, visit } from '@ember/test-helpers';
5 |
6 | module('Acceptance | watch query', function (hooks) {
7 | setupApplicationTest(hooks);
8 |
9 | const mockMovie = {
10 | id: 680,
11 | title: 'Pulp Fiction',
12 | voteAverage: 8.4,
13 | posterPath: '/dM2w364MScsjFf8pfMbaWUcWrR.jpg',
14 | overview: 'lorem',
15 | releaseDate: '1994-10-14',
16 | reviews: {
17 | edges: [],
18 | __typename: 'ReviewsConnection',
19 | },
20 | __typename: 'Movie',
21 | };
22 |
23 | const mockReviews = {
24 | edges: [
25 | {
26 | node: {
27 | stars: 5,
28 | __typename: 'Review',
29 | },
30 | __typename: 'ReviewEdge',
31 | },
32 | ],
33 | __typename: 'ReviewsConnection',
34 | };
35 |
36 | test('data should be updated when executing a mutation', async function (assert) {
37 | let movie = Object.assign({}, mockMovie);
38 | let resolvers = {
39 | Query: {
40 | movie(_, args) {
41 | assert.deepEqual(args, { id: '680' });
42 |
43 | return new Promise((resolve) => {
44 | setTimeout(() => {
45 | resolve(movie);
46 | }, 200);
47 | });
48 | },
49 | },
50 | Mutation: {
51 | changeMovieTitle(_, { id, title }) {
52 | assert.equal(id, movie.id, 'correct mutation id is passed in');
53 | assert.equal(
54 | title,
55 | 'Rambo: Last Blood',
56 | 'correct mutation title is passed in'
57 | );
58 | movie.title = title;
59 | return Object.assign({}, movie, { title });
60 | },
61 | },
62 | };
63 |
64 | addResolveFunctionsToSchema({ schema: this.pretender.schema, resolvers });
65 |
66 | await visit('/movie/680');
67 | assert.equal(currentURL(), '/movie/680');
68 |
69 | assert.dom('.movie-title').hasText('Pulp Fiction');
70 | await click('.change-movie-title');
71 |
72 | assert.dom('.movie-title').hasText('Rambo: Last Blood');
73 | });
74 |
75 | test('refetch using observable should update data and wait for response', async function (assert) {
76 | let isRefetch = false;
77 | let resolvers = {
78 | Query: {
79 | movie(_, args) {
80 | assert.deepEqual(args, { id: '680' });
81 |
82 | if (isRefetch) {
83 | return new Promise((resolve) => {
84 | setTimeout(() => {
85 | resolve(
86 | Object.assign({}, mockMovie, {
87 | title: 'The Godfather',
88 | reviews: mockReviews,
89 | })
90 | );
91 | }, 200);
92 | });
93 | }
94 |
95 | return Promise.resolve(mockMovie);
96 | },
97 | },
98 | };
99 |
100 | addResolveFunctionsToSchema({ schema: this.pretender.schema, resolvers });
101 |
102 | await visit('/movie/680');
103 | assert.equal(currentURL(), '/movie/680');
104 |
105 | assert.dom('.movie-title').hasText('Pulp Fiction');
106 | assert.dom('.movie-reviews').hasText('No reviews');
107 |
108 | isRefetch = true;
109 | await click('.refetch-data-using-observable');
110 |
111 | assert.dom('.movie-title').hasText('The Godfather');
112 | assert.dom('.movie-reviews').hasText('5 stars');
113 | });
114 |
115 | test('refetch using reoute refresh should update template', async function (assert) {
116 | let isRefetch = false;
117 | let resolvers = {
118 | Query: {
119 | movie(_, args) {
120 | assert.deepEqual(args, { id: '680' });
121 |
122 | if (isRefetch) {
123 | return new Promise((resolve) => {
124 | setTimeout(() => {
125 | resolve(
126 | Object.assign({}, mockMovie, { title: 'The Godfather' })
127 | );
128 | }, 200);
129 | });
130 | }
131 |
132 | return Promise.resolve(mockMovie);
133 | },
134 | },
135 | };
136 |
137 | addResolveFunctionsToSchema({ schema: this.pretender.schema, resolvers });
138 |
139 | await visit('/movie/680');
140 | assert.equal(currentURL(), '/movie/680');
141 |
142 | assert.dom('.movie-title').hasText('Pulp Fiction');
143 |
144 | isRefetch = true;
145 | await click('.refresh-data');
146 |
147 | assert.dom('.movie-title').hasText('The Godfather');
148 | });
149 | });
150 |
--------------------------------------------------------------------------------
/tests/unit/-private/query-manager-hooks-route-test.js:
--------------------------------------------------------------------------------
1 | import { queryManager } from 'ember-apollo-client';
2 | import { module, test } from 'qunit';
3 | import { setupTest } from 'ember-qunit';
4 | import ApolloService from 'ember-apollo-client/services/apollo';
5 | import Route from '@ember/routing/route';
6 |
7 | let unsubscribeCalled;
8 | let assertDeepEqual;
9 |
10 | let TestObject = Route.extend({
11 | apollo: queryManager({ service: 'overridden-apollo' }),
12 | });
13 |
14 | let OverriddenApollo = class extends ApolloService {
15 | managedWatchQuery(manager, opts) {
16 | assertDeepEqual(opts, { query: 'fakeQuery' });
17 |
18 | manager.trackSubscription({
19 | unsubscribe() {
20 | unsubscribeCalled++;
21 | },
22 | });
23 | }
24 |
25 | managedSubscribe(manager, opts) {
26 | assertDeepEqual(opts, { query: 'fakeSubscription' });
27 |
28 | manager.trackSubscription({
29 | unsubscribe() {
30 | unsubscribeCalled++;
31 | },
32 | });
33 | }
34 | };
35 |
36 | module('Unit | queryManager | Setup Hooks in route', function (hooks) {
37 | setupTest(hooks);
38 |
39 | hooks.beforeEach(function (assert) {
40 | assertDeepEqual = assert.deepEqual.bind(assert);
41 | unsubscribeCalled = 0;
42 | });
43 |
44 | module('with synchronous overridden functions', function (innerHooks) {
45 | innerHooks.beforeEach(function () {
46 | this.subject = function () {
47 | this.owner.register('service:overridden-apollo', OverriddenApollo);
48 | this.owner.register('test-container:test-object', TestObject);
49 | return this.owner.lookup('test-container:test-object');
50 | };
51 | });
52 |
53 | test('it unsubscribes from any watchQuery subscriptions with isExiting=true', function (assert) {
54 | let subject = this.subject();
55 |
56 | assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
57 | subject.apollo.watchQuery({ query: 'fakeQuery' });
58 | subject.apollo.watchQuery({ query: 'fakeQuery' });
59 |
60 | subject.beforeModel();
61 | subject.resetController({}, true);
62 | assert.equal(
63 | unsubscribeCalled,
64 | 2,
65 | '_apolloUnsubscribe() was called once per watchQuery'
66 | );
67 | });
68 |
69 | test('it unsubscribes from any subscriptions', function (assert) {
70 | let subject = this.subject();
71 |
72 | assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
73 | subject.apollo.subscribe({ query: 'fakeSubscription' });
74 | subject.apollo.subscribe({ query: 'fakeSubscription' });
75 |
76 | subject.beforeModel();
77 | subject.resetController({}, true);
78 | assert.equal(
79 | unsubscribeCalled,
80 | 2,
81 | '_apolloUnsubscribe() was called once per subscribe'
82 | );
83 | });
84 |
85 | test('it only unsubscribes from stale watchQuery subscriptions with isExiting=false', function (assert) {
86 | let subject = this.subject();
87 |
88 | assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
89 | subject.apollo.watchQuery({ query: 'fakeQuery' });
90 |
91 | // simulate data being re-fetched, as when query params change
92 | subject.beforeModel();
93 | subject.apollo.watchQuery({ query: 'fakeQuery' });
94 |
95 | subject.resetController({}, false);
96 | assert.equal(
97 | unsubscribeCalled,
98 | 1,
99 | '_apolloUnsubscribe() was called only once, for the first query'
100 | );
101 |
102 | subject.beforeModel();
103 | subject.willDestroy();
104 | assert.equal(
105 | unsubscribeCalled,
106 | 2,
107 | '_apolloUnsubscribe() was called for all quries'
108 | );
109 | });
110 |
111 | test('it unsubscribes from any watchQuery subscriptions on willDestroy', function (assert) {
112 | let subject = this.subject();
113 |
114 | assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
115 | subject.apollo.watchQuery({ query: 'fakeQuery' });
116 | subject.apollo.watchQuery({ query: 'fakeQuery' });
117 |
118 | subject.beforeModel();
119 | subject.willDestroy();
120 | assert.equal(
121 | unsubscribeCalled,
122 | 2,
123 | '_apolloUnsubscribe() was called once per watchQuery'
124 | );
125 | });
126 | });
127 |
128 | module('with asynchronous beforeModel', function (innerHooks) {
129 | innerHooks.beforeEach(function () {
130 | this.subject = function () {
131 | class TestAsyncObject extends Route {
132 | afterAsync = false;
133 | @queryManager({ service: 'overridden-apollo' }) apollo;
134 | async beforeModel() {
135 | await new Promise((resolve) => setTimeout(resolve, 10));
136 | this.afterAsync = true;
137 | super.beforeModel();
138 | }
139 | }
140 |
141 | this.owner.register('service:overridden-apollo', OverriddenApollo);
142 | this.owner.register('test-container:test-object', TestAsyncObject);
143 | return this.owner.lookup('test-container:test-object');
144 | };
145 | });
146 |
147 | test('it must allow to await for the beforeModel function', async function (assert) {
148 | assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
149 | const subject = this.subject();
150 | subject.apollo.watchQuery({ query: 'fakeQuery' });
151 | await subject.beforeModel();
152 | assert.ok(
153 | subject.afterAsync,
154 | 'original implementation of beforeModel should be awaited'
155 | );
156 | });
157 | });
158 | });
159 |
--------------------------------------------------------------------------------
/tests/dummy/app/instance-initializers/mock-graphql.js:
--------------------------------------------------------------------------------
1 | import Pretender from 'pretender';
2 | import { graphql } from 'graphql';
3 | import {
4 | addMockFunctionsToSchema,
5 | addResolveFunctionsToSchema,
6 | makeExecutableSchema,
7 | } from 'graphql-tools';
8 | import schemaString from '../schema';
9 | import config from 'dummy/config/environment';
10 |
11 | const __resolveType = ({ type }) => type;
12 |
13 | // https://developers.themoviedb.org/3/movies/get-top-rated-movies
14 | let movies = [
15 | {
16 | id: 238,
17 | title: 'The Godfather',
18 | voteAverage: 8.6,
19 | posterPath: '/rPdtLWNsZmAtoZl9PK7S2wE3qiS.jpg',
20 | overview:
21 | 'Spanning the years 1945 to 1955, a chronicle of the fictional Italian-American Corleone crime family. When organized crime family patriarch, Vito Corleone barely survives an attempt on his life, his youngest son, Michael steps in to take care of the would-be killers, launching a campaign of bloody revenge.',
22 | releaseDate: '1972-03-15',
23 | },
24 |
25 | {
26 | id: 680,
27 | title: 'Pulp Fiction',
28 | voteAverage: 8.4,
29 | posterPath: '/dM2w364MScsjFf8pfMbaWUcWrR.jpg',
30 | overview:
31 | "A burger-loving hit man, his philosophical partner, a drug-addled gangster's moll and a washed-up boxer converge in this sprawling, comedic crime caper. Their adventures unfurl in three stories that ingeniously trip back and forth in time.",
32 | releaseDate: '1994-10-14',
33 | },
34 |
35 | {
36 | id: 240,
37 | title: 'The Godfather: Part II',
38 | voteAverage: 8.5,
39 | posterPath: '/bVq65huQ8vHDd1a4Z37QtuyEvpA.jpg',
40 | overview:
41 | 'In the continuing saga of the Corleone crime family, a young Vito Corleone grows up in Sicily and in 1910s New York. In the 1950s, Michael Corleone attempts to expand the family business into Las Vegas, Hollywood and Cuba.',
42 | releaseDate: '1974-12-20',
43 | },
44 |
45 | {
46 | id: 13,
47 | title: 'Forrest Gump',
48 | voteAverage: 8.4,
49 | posterPath: '/yE5d3BUhE8hCnkMUJOo1QDoOGNz.jpg',
50 | overview:
51 | 'A man with a low IQ has accomplished great things in his life and been present during significant historic events—in each case, far exceeding what anyone imagined he could do. But despite all he has achieved, his one true love eludes him.',
52 | releaseDate: '1994-07-06',
53 | },
54 | ];
55 |
56 | function startPretender() {
57 | let resolvers = {
58 | // This is where you would declare custom resolvers. For example, assume we
59 | // had a custom ID type:
60 | //
61 | // IDType: {
62 | // __parseValue(value) {
63 | // return value;
64 | // },
65 | // __serialize(value) {
66 | // return value;
67 | // },
68 | // __parseLiteral(ast) {
69 | // return ast.value;
70 | // }
71 | // },
72 |
73 | // We set up __resolveType for this interface type here, then it is inherited
74 | // when we build the schema:
75 | SearchResult: { __resolveType },
76 | Query: {
77 | movies(_, args) {
78 | if (args.topRated) {
79 | return movies.filter((movie) => {
80 | if (movie.voteAverage >= 8.5) {
81 | return movie;
82 | }
83 | return false;
84 | });
85 | }
86 | return movies;
87 | },
88 | movie(_, args) {
89 | return movies.find((movie) => {
90 | return movie.id == args.id;
91 | });
92 | },
93 | },
94 | Mutation: {
95 | changeMovieTitle(_, { id, title }) {
96 | let movie = movies.find((movie) => {
97 | return movie.id == id;
98 | });
99 | return Object.assign(movie, { title });
100 | },
101 | },
102 | };
103 | let typeResolvers = {
104 | // This is where you can declare custom type resolvers, such as those
105 | // necessary to infer the specific object type of a union type.
106 | };
107 | let mocks = {
108 | // This is where you tell graphql-tools how to generate a mock for a custom
109 | // scalar type:
110 | //
111 | // Time() {
112 | // return moment().utc().format('YYYY-MM-DDTHH:mm:ss.SSSZ');
113 | // }
114 |
115 | Date() {
116 | return '2019-09-28';
117 | },
118 |
119 | Int() {
120 | return 5;
121 | },
122 | };
123 |
124 | let schema = makeExecutableSchema({ typeDefs: schemaString, resolvers });
125 | addResolveFunctionsToSchema({
126 | schema,
127 | resolvers: typeResolvers,
128 | inheritResolversFromInterfaces: true,
129 | });
130 | addMockFunctionsToSchema({ schema, mocks, preserveResolvers: true });
131 |
132 | let pretender = new Pretender();
133 |
134 | pretender.post('https://test.example/graphql', function (request) {
135 | let body = JSON.parse(request.requestBody);
136 |
137 | return graphql(schema, body.query, {}, {}, body.variables).then(
138 | (result) => {
139 | return [200, { 'Content-Type': 'application/json' }, result];
140 | }
141 | );
142 | });
143 |
144 | pretender.prepareBody = function (body) {
145 | return JSON.stringify(body);
146 | };
147 |
148 | pretender.handledRequest = function (verb, path, request) {
149 | console.group('Mocked Request');
150 | console.info(verb, path);
151 | try {
152 | console.info('Request', JSON.parse(request.requestBody));
153 | console.info('Response', JSON.parse(request.responseText));
154 | } catch (e) {
155 | console.info('Request', request.requestBody);
156 | console.info('Response', request.responseText);
157 | }
158 | console.groupEnd();
159 | };
160 | return pretender;
161 | }
162 |
163 | export function initialize(/* appInstance */) {
164 | if (config.environment !== 'test') {
165 | startPretender();
166 | }
167 | }
168 |
169 | export default {
170 | initialize,
171 | };
172 |
--------------------------------------------------------------------------------
/addon/-private/apollo/query-manager.js:
--------------------------------------------------------------------------------
1 | import { getOwner } from '@ember/application';
2 | import { computed } from '@ember/object';
3 | import setupHooks from './setup-hooks';
4 |
5 | // https://github.com/emberjs/ember.js/blob/70bcd9facdaf37ba19f60e6a10a511a34724f0f4/packages/%40ember/-internals/metal/lib/decorator.ts#L20-L41
6 | function isElementDescriptor(args) {
7 | let [maybeTarget, maybeKey, maybeDesc] = args;
8 |
9 | return (
10 | // Ensure we have the right number of args
11 | args.length === 3 &&
12 | // Make sure the target is a class or object (prototype)
13 | (typeof maybeTarget === 'function' ||
14 | (typeof maybeTarget === 'object' && maybeTarget !== null)) &&
15 | // Make sure the key is a string
16 | typeof maybeKey === 'string' &&
17 | // Make sure the descriptor is the right shape
18 | ((typeof maybeDesc === 'object' &&
19 | maybeDesc !== null &&
20 | 'enumerable' in maybeDesc &&
21 | 'configurable' in maybeDesc) ||
22 | // TS compatibility
23 | maybeDesc === undefined)
24 | );
25 | }
26 |
27 | export function queryManager(...theArgs) {
28 | let setupQueryManager = computed(function () {
29 | const [options] = theArgs;
30 | const owner = getOwner(this);
31 | const config = owner.resolveRegistration('config:environment');
32 |
33 | const serviceOption = options?.service;
34 | const serviceDefaultOption = config.apollo?.defaultQueryManagerService;
35 | const serviceName = serviceOption || serviceDefaultOption || 'apollo';
36 |
37 | const service = owner.lookup(`service:${serviceName}`);
38 | const queryManager = new QueryManager(service);
39 |
40 | setupHooks(queryManager, this);
41 |
42 | return queryManager;
43 | });
44 |
45 | if (isElementDescriptor(theArgs)) {
46 | // Needed to suport @queryManager apollo; (no arguments)
47 | return setupQueryManager(...theArgs);
48 | } else {
49 | return setupQueryManager;
50 | }
51 | }
52 |
53 | export default class QueryManager {
54 | apollo = undefined;
55 | activeSubscriptions = [];
56 |
57 | constructor(apolloService) {
58 | this.apollo = apolloService;
59 | }
60 |
61 | get apolloClient() {
62 | return this.apollo.client;
63 | }
64 |
65 | /**
66 | * Executes a mutation on the Apollo service. The resolved object will
67 | * never be updated and does not have to be unsubscribed.
68 | *
69 | * @method mutate
70 | * @param {!Object} opts The query options used in the Apollo Client mutate.
71 | * @param {String} resultKey The key that will be returned from the resulting response data. If null or undefined, the entire response data will be returned.
72 | * @return {!Promise}
73 | * @public
74 | */
75 | mutate(opts, resultKey) {
76 | return this.apollo.mutate(opts, resultKey);
77 | }
78 |
79 | /**
80 | * Executes a single `query` on the Apollo service. The resolved object will
81 | * never be updated and does not have to be unsubscribed.
82 | *
83 | * @method query
84 | * @param {!Object} opts The query options used in the Apollo Client query.
85 | * @param {String} resultKey The key that will be returned from the resulting response data. If null or undefined, the entire response data will be returned.
86 | * @return {!Promise}
87 | * @public
88 | */
89 | query(opts, resultKey) {
90 | return this.apollo.query(opts, resultKey);
91 | }
92 |
93 | /**
94 | * Executes a `watchQuery` on the Apollo service. If updated data for this
95 | * query is loaded into the store by another query, the resolved object will
96 | * be updated with the new data.
97 | *
98 | * This watch query is tracked by the QueryManager and will be unsubscribed
99 | * (and no longer updated with new data) when unsubscribeAll() is called.
100 | *
101 | * @method watchQuery
102 | * @param {!Object} opts The query options used in the Apollo Client watchQuery.
103 | * @param {String} resultKey The key that will be returned from the resulting response data. If null or undefined, the entire response data will be returned.
104 | * @return {!Promise}
105 | * @public
106 | */
107 | watchQuery(opts, resultKey) {
108 | return this.apollo.managedWatchQuery(this, opts, resultKey);
109 | }
110 |
111 | /**
112 | * Executes a `subscribe` on the Apollo service.
113 | *
114 | * This subscription is tracked by the QueryManager and will be unsubscribed
115 | * (and no longer updated with new data) when unsubscribeAll() is called.
116 | *
117 | * The Promise will contain a Subscription object which will contain events
118 | * as they come in. It will also trigger `event` messages which can be listened for.
119 | *
120 | * @method subscribe
121 | * @param {!Object} opts The query options used in the Apollo Client watchQuery.
122 | * @param {String} resultKey The key that will be returned from the resulting response data. If null or undefined, the entire response data will be returned.
123 | * @return {!Promise}
124 | * @public
125 | */
126 | subscribe(opts, resultKey) {
127 | return this.apollo.managedSubscribe(this, opts, resultKey);
128 | }
129 |
130 | /**
131 | * Tracks a subscription in the list of active subscriptions, which will all be
132 | * cancelled when `unsubcribeAll` is called.
133 | *
134 | * @method trackSubscription
135 | * @param {!Object} subscription The Apollo Client Subscription to be tracked for future unsubscription.
136 | * @private
137 | */
138 | trackSubscription(subscription) {
139 | this.activeSubscriptions.push({ subscription, stale: false });
140 | }
141 |
142 | /**
143 | * Marks all tracked subscriptions as being stale, such that they will be
144 | * unsubscribed in `unsubscribeAll` even if `onlyStale` is true.
145 | *
146 | * @method markSubscriptionsStale
147 | * @private
148 | */
149 | markSubscriptionsStale() {
150 | this.activeSubscriptions.forEach((subscription) => {
151 | subscription.stale = true;
152 | });
153 | }
154 |
155 | /**
156 | * Unsubscribes from all actively tracked subscriptions initiated by calls to
157 | * `watchQuery`. This is normally called automatically by the
158 | * queryManager decorator when a component is torn down, or qhen `resetController`
159 | * is called on the route.
160 | *
161 | * @method unsubscribeAll
162 | * @param {Boolean} onlyStale Whether to unsubscribe only from subscriptions which were previously marked as stale.
163 | * @public
164 | */
165 | unsubscribeAll(onlyStale = false) {
166 | this.activeSubscriptions.forEach((subscription) => {
167 | if (!onlyStale || subscription.stale) {
168 | subscription.subscription.unsubscribe();
169 | }
170 | });
171 |
172 | this.activeSubscriptions = onlyStale
173 | ? this.activeSubscriptions.filter((subscription) => {
174 | return !subscription.stale;
175 | })
176 | : [];
177 | }
178 | }
179 |
--------------------------------------------------------------------------------
/tests/unit/services/apollo-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { setupTest } from 'ember-qunit';
3 | import ApolloService, {
4 | unsubscribe,
5 | getObservable,
6 | ApolloErrorWithResponse,
7 | } from 'ember-apollo-client/services/apollo';
8 | import testQuery from '../build/test-query';
9 | import testMutation from '../build/test-mutation';
10 | import testSubscription from '../build/test-subscription';
11 | import { Promise } from 'rsvp';
12 | import { addListener, removeListener } from '@ember/object/events';
13 |
14 | let fakeLink = () => {};
15 |
16 | class OverriddenApollo extends ApolloService {
17 | clientOptions() {
18 | let opts = super.clientOptions();
19 | return { ...opts, link: fakeLink };
20 | }
21 | }
22 |
23 | module('Unit | Service | apollo', function (hooks) {
24 | setupTest(hooks);
25 |
26 | test('it exists', function (assert) {
27 | let service = this.owner.lookup('service:apollo');
28 | assert.ok(service);
29 | });
30 |
31 | test('it uses clientOptions', function (assert) {
32 | this.owner.register('service:overridden-apollo', OverriddenApollo);
33 | let service = this.owner.lookup('service:overridden-apollo');
34 |
35 | // make sure the override was used.
36 | assert.equal(service.client.link, fakeLink);
37 | });
38 |
39 | test('.mutate resolves with __typename', async function (assert) {
40 | let service = this.owner.lookup('service:apollo');
41 |
42 | service.set('client', {
43 | mutate() {
44 | assert.ok(true, 'Called mutate function on apollo client');
45 |
46 | return new Promise((resolve) => {
47 | resolve({ data: { human: { name: 'Link' }, __typename: 'person' } });
48 | });
49 | },
50 | });
51 |
52 | const result = await service.mutate({ mutation: testMutation });
53 |
54 | assert.equal(result.__typename, 'person');
55 | });
56 |
57 | test('.query resolves with __typename', async function (assert) {
58 | let service = this.owner.lookup('service:apollo');
59 |
60 | service.set('client', {
61 | query() {
62 | assert.ok(true, 'Called query function on apollo client');
63 |
64 | return new Promise((resolve) => {
65 | resolve({ data: { human: { name: 'Link' }, __typename: 'person' } });
66 | });
67 | },
68 | });
69 |
70 | const result = await service.query({ query: testQuery });
71 |
72 | assert.equal(result.__typename, 'person');
73 | });
74 |
75 | test('.watchQuery with key', async function (assert) {
76 | let service = this.owner.lookup('service:apollo');
77 |
78 | service.set('client', {
79 | watchQuery() {
80 | assert.ok(true, 'Called watchQuery function on apollo client');
81 |
82 | return {
83 | subscribe({ next }) {
84 | next({ data: { human: { name: 'Link' }, __typename: 'person' } });
85 | },
86 | };
87 | },
88 | });
89 |
90 | const result = await service.watchQuery({ query: testQuery }, 'human');
91 | assert.equal(result.name, 'Link');
92 | });
93 |
94 | test('.watchQuery with key gracefully handles null', async function (assert) {
95 | let service = this.owner.lookup('service:apollo');
96 |
97 | service.set('client', {
98 | watchQuery() {
99 | return {
100 | subscribe({ next }) {
101 | next({ data: null });
102 | },
103 | };
104 | },
105 | });
106 |
107 | const result = await service.watchQuery({ query: testQuery }, 'human');
108 | assert.equal(result.name, undefined);
109 | });
110 |
111 | test('.subscribe with key', async function (assert) {
112 | let service = this.owner.lookup('service:apollo');
113 | let nextFunction = null;
114 |
115 | service.set('client', {
116 | subscribe() {
117 | assert.ok(true, 'Called subscribe function on apollo client');
118 |
119 | return {
120 | subscribe({ next }) {
121 | nextFunction = next;
122 | },
123 | };
124 | },
125 | });
126 |
127 | const result = await service.subscribe(
128 | {
129 | subscription: testSubscription,
130 | },
131 | 'human'
132 | );
133 |
134 | const names = [];
135 | const handleEvent = (event) => {
136 | names.push(event.name);
137 | };
138 |
139 | addListener(result, 'event', handleEvent);
140 |
141 | // Things initialize as empty
142 | assert.equal(result.lastEvent, null);
143 |
144 | // Two updates come in
145 | nextFunction({ data: { human: { name: '1 Link' }, __typename: 'person' } });
146 | nextFunction({ data: { human: { name: '2 Luke' }, __typename: 'person' } });
147 |
148 | // Events are in the correct order
149 | assert.equal(result.lastEvent.name, '2 Luke');
150 | // Event streams are in the correct order
151 | assert.equal(names.join(' '), '1 Link 2 Luke');
152 |
153 | nextFunction({ data: { human: { name: '3 Greg' }, __typename: 'person' } });
154 | // Stream null
155 | nextFunction({ loading: true });
156 | nextFunction({ loading: true, data: null });
157 | // Still have last event
158 | assert.equal(result.lastEvent.name, '3 Greg');
159 | assert.equal(names.join(' '), '1 Link 2 Luke 3 Greg');
160 | removeListener(result, 'event', handleEvent);
161 | });
162 |
163 | test('tests should wait for response', async function (assert) {
164 | let service = this.owner.lookup('service:apollo');
165 |
166 | service.set('client', {
167 | query() {
168 | assert.ok(true, 'Called query function on apollo client');
169 |
170 | return new Promise((resolve) => {
171 | setTimeout(() => {
172 | resolve({
173 | data: { human: { name: 'Link' }, __typename: 'person' },
174 | });
175 | }, 300);
176 | });
177 | },
178 | });
179 |
180 | const result = await service.query({ query: testQuery });
181 |
182 | assert.equal(result.__typename, 'person');
183 | });
184 |
185 | test('unsubscribe works from a watched query', async function (assert) {
186 | let service = this.owner.lookup('service:apollo');
187 | assert.expect(1);
188 |
189 | service.set('client', {
190 | watchQuery() {
191 | return {
192 | subscribe({ next }) {
193 | next({ data: { human: { name: 'Link' }, __typename: 'person' } });
194 | return {
195 | unsubscribe: () => {
196 | assert.ok('Unsbuscribe was called');
197 | },
198 | };
199 | },
200 | };
201 | },
202 | });
203 |
204 | const result = await service.watchQuery({ query: testQuery }, 'human');
205 | unsubscribe(result);
206 | });
207 |
208 | test('getObservable works from a watched query', async function (assert) {
209 | let service = this.owner.lookup('service:apollo');
210 | assert.expect(1);
211 |
212 | service.set('client', {
213 | watchQuery() {
214 | return {
215 | subscribe({ next }) {
216 | next({ data: { human: { name: 'Link' }, __typename: 'person' } });
217 | },
218 | };
219 | },
220 | });
221 |
222 | const result = await service.watchQuery({ query: testQuery }, 'human');
223 | assert.ok(getObservable(result));
224 | });
225 |
226 | module('.query errors', function () {
227 | test('it handles errors with default errorPolicy', async function (assert) {
228 | let service = this.owner.lookup('service:apollo');
229 |
230 | service.set('client', {
231 | query() {
232 | assert.step('Called query function on apollo client');
233 |
234 | return new Promise((resolve, reject) => {
235 | reject('Test error');
236 | });
237 | },
238 | });
239 |
240 | try {
241 | await service.query({ query: testQuery });
242 | } catch (error) {
243 | assert.step('.query rejects');
244 | assert.equal(error, 'Test error', 'an error is thrown');
245 | }
246 |
247 | assert.verifySteps([
248 | 'Called query function on apollo client',
249 | '.query rejects',
250 | ]);
251 | });
252 |
253 | test('it works with errorPolicy="all" without resultKey', async function (assert) {
254 | let service = this.owner.lookup('service:apollo');
255 |
256 | service.set('client', {
257 | query() {
258 | assert.step('Called query function on apollo client');
259 |
260 | return new Promise((resolve) => {
261 | resolve({
262 | data: { human: { name: 'Anne' } },
263 | errors: ['Test error #1', 'Test error #2'],
264 | });
265 | });
266 | },
267 | });
268 |
269 | try {
270 | await service.query({ query: testQuery, errorPolicy: 'all' });
271 | } catch (error) {
272 | assert.step('.query rejects');
273 | assert.ok(
274 | error instanceof ApolloErrorWithResponse,
275 | 'error is of type ApolloErrorWithResponse'
276 | );
277 | assert.deepEqual(
278 | error.errors,
279 | ['Test error #1', 'Test error #2'],
280 | 'errors are correct'
281 | );
282 | assert.deepEqual(
283 | error.response,
284 | { human: { name: 'Anne' } },
285 | 'response is correct'
286 | );
287 | }
288 |
289 | assert.verifySteps([
290 | 'Called query function on apollo client',
291 | '.query rejects',
292 | ]);
293 | });
294 |
295 | test('it works with errorPolicy="all" with resultKey', async function (assert) {
296 | let service = this.owner.lookup('service:apollo');
297 |
298 | service.set('client', {
299 | query() {
300 | assert.step('Called query function on apollo client');
301 |
302 | return new Promise((resolve) => {
303 | resolve({
304 | data: { human: { name: 'Anne' } },
305 | errors: ['Test error #1', 'Test error #2'],
306 | });
307 | });
308 | },
309 | });
310 |
311 | try {
312 | await service.query({ query: testQuery, errorPolicy: 'all' }, 'human');
313 | } catch (error) {
314 | assert.step('.query rejects');
315 | assert.ok(
316 | error instanceof ApolloErrorWithResponse,
317 | 'error is of type ApolloErrorWithResponse'
318 | );
319 | assert.deepEqual(
320 | error.errors,
321 | ['Test error #1', 'Test error #2'],
322 | 'errors are correct'
323 | );
324 | assert.deepEqual(
325 | error.response,
326 | { name: 'Anne' },
327 | 'response is correct'
328 | );
329 | }
330 |
331 | assert.verifySteps([
332 | 'Called query function on apollo client',
333 | '.query rejects',
334 | ]);
335 | });
336 |
337 | test('it works with errorPolicy="all" with resultKey and without data', async function (assert) {
338 | let service = this.owner.lookup('service:apollo');
339 |
340 | service.set('client', {
341 | query() {
342 | assert.step('Called query function on apollo client');
343 |
344 | return new Promise((resolve) => {
345 | resolve({
346 | data: null,
347 | errors: ['Test error #1', 'Test error #2'],
348 | });
349 | });
350 | },
351 | });
352 |
353 | try {
354 | await service.query({ query: testQuery, errorPolicy: 'all' }, 'human');
355 | } catch (error) {
356 | assert.step('.query rejects');
357 | assert.ok(
358 | error instanceof ApolloErrorWithResponse,
359 | 'error is of type ApolloErrorWithResponse'
360 | );
361 | assert.deepEqual(
362 | error.errors,
363 | ['Test error #1', 'Test error #2'],
364 | 'errors are correct'
365 | );
366 | assert.deepEqual(error.response, null, 'response is correct');
367 | }
368 |
369 | assert.verifySteps([
370 | 'Called query function on apollo client',
371 | '.query rejects',
372 | ]);
373 | });
374 | });
375 | });
376 |
--------------------------------------------------------------------------------
/addon/services/apollo.js:
--------------------------------------------------------------------------------
1 | import { get, set, setProperties, defineProperty } from '@ember/object';
2 | import { sendEvent } from '@ember/object/events';
3 | import RSVP from 'rsvp';
4 | import Service from '@ember/service';
5 | import { A } from '@ember/array';
6 | import {
7 | ApolloClient,
8 | createHttpLink,
9 | InMemoryCache,
10 | } from '@apollo/client/core';
11 | import { getOwner } from '@ember/application';
12 | import { isArray } from '@ember/array';
13 | import { isNone, isPresent } from '@ember/utils';
14 | import { run, next } from '@ember/runloop';
15 | import { QueryManager } from '../index';
16 | import { waitForPromise, waitForFetch } from '@ember/test-waiters';
17 | import { tracked } from '@glimmer/tracking';
18 | import { macroCondition, isTesting } from '@embroider/macros';
19 |
20 | export function wrappedFetch(...args) {
21 | return waitForFetch(fetch(...args));
22 | }
23 |
24 | const apolloObservableWeakMap = new WeakMap();
25 | const apolloUnsubscribeWeakMap = new WeakMap();
26 |
27 | export function getObservable(queryResult) {
28 | return apolloObservableWeakMap.get(queryResult);
29 | }
30 |
31 | export function unsubscribe(queryResult) {
32 | let fn = apolloUnsubscribeWeakMap.get(queryResult);
33 |
34 | if (typeof fn === 'function') {
35 | return fn();
36 | }
37 | }
38 |
39 | class EmberApolloSubscription {
40 | lastEvent = null;
41 | _apolloClientSubscription = null;
42 |
43 | apolloUnsubscribe() {
44 | this._apolloClientSubscription.unsubscribe();
45 | }
46 |
47 | _onNewData(newData) {
48 | set(this, 'lastEvent', newData);
49 | sendEvent(this, 'event', [newData]);
50 | }
51 | }
52 |
53 | class TrackedObject {
54 | constructor() {
55 | defineProperty(this, 'setUnknownProperty', {
56 | configurable: false,
57 | enumerable: false,
58 | value: function (key, value) {
59 | defineProperty(this, key, tracked());
60 | this[key] = value;
61 | },
62 | writable: false,
63 | });
64 | }
65 | }
66 |
67 | function extractNewData(resultKey, { data, loading }) {
68 | if (loading && isNone(data)) {
69 | // This happens when the cache has no data and the data is still loading
70 | // from the server. We don't want to resolve the promise with empty data
71 | // so we instead just bail out.
72 | //
73 | // See https://github.com/bgentry/ember-apollo-client/issues/45
74 | return null;
75 | }
76 | let keyedData = isNone(resultKey) ? data : data && get(data, resultKey);
77 |
78 | return keyedData || {};
79 | }
80 |
81 | function newDataFunc(observable, resultKey, resolve, unsubscribeFn = null) {
82 | let obj;
83 |
84 | return (newData) => {
85 | let dataToSend = extractNewData(resultKey, newData);
86 |
87 | if (dataToSend === null) {
88 | // see comment in extractNewData
89 | return;
90 | }
91 |
92 | if (isNone(obj)) {
93 | if (isArray(dataToSend)) {
94 | obj = A([...dataToSend]);
95 | } else {
96 | obj = new TrackedObject();
97 | setProperties(obj, dataToSend);
98 | }
99 |
100 | if (!apolloObservableWeakMap.has(obj)) {
101 | apolloObservableWeakMap.set(obj, observable);
102 | }
103 |
104 | if (unsubscribeFn && !apolloUnsubscribeWeakMap.has(obj)) {
105 | apolloUnsubscribeWeakMap.set(obj, unsubscribeFn);
106 | }
107 |
108 | return resolve(obj);
109 | }
110 |
111 | next(() => {
112 | isArray(obj)
113 | ? obj.setObjects(dataToSend)
114 | : setProperties(obj, dataToSend);
115 | });
116 | };
117 | }
118 |
119 | export default class ApolloService extends Service {
120 | client = null;
121 |
122 | constructor(...args) {
123 | super(...args);
124 |
125 | this.client = new ApolloClient(this.clientOptions());
126 | }
127 |
128 | willDestroy() {
129 | // Ensure watch queries are not refeteched anymore
130 | // See: https://www.apollographql.com/docs/react/v2.6/api/apollo-client/#ApolloClient.clearStore
131 | // We guard against non-existance mostly to simplify tests a bit here
132 | if (typeof this.client.clearStore === 'function') {
133 | this.client.clearStore();
134 | }
135 | }
136 |
137 | // options are configured in your environment.js.
138 | get options() {
139 | // config:environment not injected into tests, so try to handle that gracefully.
140 | let config = getOwner(this).resolveRegistration('config:environment');
141 | if (config && config.apollo) {
142 | return config.apollo;
143 | } else if (macroCondition(isTesting())) {
144 | return {
145 | apiURL: 'http://testserver.example/v1/graph',
146 | };
147 | }
148 | throw new Error('no Apollo service options defined');
149 | }
150 |
151 | cache() {
152 | return new InMemoryCache();
153 | }
154 |
155 | link() {
156 | const { apiURL, requestCredentials } = this.options;
157 | const linkOptions = { uri: apiURL, fetch: wrappedFetch };
158 |
159 | if (isPresent(requestCredentials)) {
160 | linkOptions.credentials = requestCredentials;
161 | }
162 | return createHttpLink(linkOptions);
163 | }
164 |
165 | /**
166 | * This is the options hash that will be passed to the ApolloClient constructor.
167 | * You can override it if you wish to customize the ApolloClient.
168 | *
169 | * @method clientOptions
170 | * @return {!Object}
171 | * @public
172 | */
173 | clientOptions() {
174 | return {
175 | link: this.link(),
176 | cache: this.cache(),
177 | };
178 | }
179 |
180 | /**
181 | * Executes a mutation on the Apollo client. The resolved object will
182 | * never be updated and does not have to be unsubscribed.
183 | *
184 | * @method mutate
185 | * @param {!import('@apollo/client').MutationOptions} opts The query options used in the Apollo Client mutate.
186 | * @param {String} resultKey The key that will be returned from the resulting response data. If null or undefined, the entire response data will be returned.
187 | * @return {!Promise}
188 | * @public
189 | */
190 | mutate(opts, resultKey) {
191 | return waitForPromise(
192 | new RSVP.Promise((resolve, reject) => {
193 | this.client
194 | .mutate(opts)
195 | .then((result) => {
196 | let dataToSend = isNone(resultKey)
197 | ? result.data
198 | : get(result.data, resultKey);
199 | return resolve(dataToSend);
200 | })
201 | .catch((error) => {
202 | let errors;
203 | if (isPresent(error.networkError)) {
204 | error.networkError.code = 'network_error';
205 | errors = [error.networkError];
206 | } else if (isPresent(error.graphQLErrors)) {
207 | errors = error.graphQLErrors;
208 | }
209 | if (errors) {
210 | return reject({ errors });
211 | }
212 | throw error;
213 | });
214 | })
215 | );
216 | }
217 |
218 | /**
219 | * Executes a `watchQuery` on the Apollo client. If updated data for this
220 | * query is loaded into the store by another query, the resolved object will
221 | * be updated with the new data.
222 | *
223 | * When using this method, it is important to call `apolloUnsubscribe()` on
224 | * the resolved data when the route or component is torn down. That tells
225 | * Apollo to stop trying to send updated data to a non-existent listener.
226 | *
227 | * @method watchQuery
228 | * @param {!import('@apollo/client').WatchQueryOptions} opts The query options used in the Apollo Client watchQuery.
229 | * @param {String} resultKey The key that will be returned from the resulting response data. If null or undefined, the entire response data will be returned.
230 | * @return {!Promise}
231 | * @public
232 | */
233 | watchQuery(opts, resultKey) {
234 | let observable = this.client.watchQuery(opts);
235 | let subscription;
236 |
237 | function unsubscribe() {
238 | subscription && subscription.unsubscribe();
239 | }
240 |
241 | return waitForPromise(
242 | new RSVP.Promise((resolve, reject) => {
243 | // TODO: add an error function here for handling errors
244 | subscription = observable.subscribe({
245 | next: newDataFunc(observable, resultKey, resolve, unsubscribe),
246 | error(e) {
247 | reject(e);
248 | },
249 | });
250 | })
251 | );
252 | }
253 |
254 | /**
255 | * Executes a `subscribe` on the Apollo client. If this subscription receives
256 | * data, the resolved object will be updated with the new data.
257 | *
258 | * When using this method, it is important to call `apolloUnsubscribe()` on
259 | * the resolved data when the route or component is torn down. That tells
260 | * Apollo to stop trying to send updated data to a non-existent listener.
261 | *
262 | * @method subscribe
263 | * @param {!import('@apollo/client').SubscriptionOptions} opts The query options used in the Apollo Client subscribe.
264 | * @param {String} resultKey The key that will be returned from the resulting response data. If null or undefined, the entire response data will be returned.
265 | * @return {!Promise}
266 | * @public
267 | */
268 | subscribe(opts, resultKey = null) {
269 | const observable = this.client.subscribe(opts);
270 |
271 | const obj = new EmberApolloSubscription();
272 |
273 | return waitForPromise(
274 | new RSVP.Promise((resolve, reject) => {
275 | let subscription = observable.subscribe({
276 | next: (newData) => {
277 | let dataToSend = extractNewData(resultKey, newData);
278 | if (dataToSend === null) {
279 | // see comment in extractNewData
280 | return;
281 | }
282 |
283 | run(() => obj._onNewData(dataToSend));
284 | },
285 | error(e) {
286 | reject(e);
287 | },
288 | });
289 |
290 | obj._apolloClientSubscription = subscription;
291 |
292 | resolve(obj);
293 | })
294 | );
295 | }
296 |
297 | /**
298 | * Executes a single `query` on the Apollo client. The resolved object will
299 | * never be updated and does not have to be unsubscribed.
300 | *
301 | * @method query
302 | * @param {!import('@apollo/client').QueryOptions} opts The query options used in the Apollo Client query.
303 | * @param {String} resultKey The key that will be returned from the resulting response data. If null or undefined, the entire response data will be returned.
304 | * @return {!Promise}
305 | * @public
306 | */
307 | query(opts, resultKey) {
308 | return waitForPromise(
309 | new RSVP.Promise((resolve, reject) => {
310 | this.client
311 | .query(opts)
312 | .then((result) => {
313 | let response = result.data;
314 | if (!isNone(resultKey) && response) {
315 | response = get(response, resultKey);
316 | }
317 |
318 | if (
319 | opts.errorPolicy === 'all' &&
320 | result.errors &&
321 | result.errors.length > 0
322 | ) {
323 | return reject(
324 | new ApolloErrorWithResponse({
325 | response,
326 | errors: result.errors,
327 | })
328 | );
329 | }
330 |
331 | return resolve(response);
332 | })
333 | .catch((error) => {
334 | return reject(error);
335 | });
336 | })
337 | );
338 | }
339 |
340 | /**
341 | * Executes a `watchQuery` on the Apollo client and tracks the resulting
342 | * subscription on the provided query manager.
343 | *
344 | * @method managedWatchQuery
345 | * @param {!QueryManager} manager A QueryManager that should track this active watchQuery.
346 | * @param {!import('@apollo/client').WatchQueryOptions} opts The query options used in the Apollo Client watchQuery.
347 | * @param {String} resultKey The key that will be returned from the resulting response data. If null or undefined, the entire response data will be returned.
348 | * @return {!Promise}
349 | * @private
350 | */
351 | managedWatchQuery(manager, opts, resultKey) {
352 | let observable = this.client.watchQuery(opts);
353 | let subscription;
354 |
355 | function unsubscribe() {
356 | subscription && subscription.unsubscribe();
357 | }
358 |
359 | return waitForPromise(
360 | new RSVP.Promise((resolve, reject) => {
361 | subscription = observable.subscribe({
362 | next: newDataFunc(observable, resultKey, resolve, unsubscribe),
363 | error(e) {
364 | reject(e);
365 | },
366 | });
367 | manager.trackSubscription(subscription);
368 | })
369 | );
370 | }
371 |
372 | /**
373 | * Executes a `subscribe` on the Apollo client and tracks the resulting
374 | * subscription on the provided query manager.
375 | *
376 | * @method managedSubscribe
377 | * @param {!QueryManager} manager A QueryManager that should track this active subscribe.
378 | * @param {!import('@apollo/client').SubscriptionOptions} opts The query options used in the Apollo Client subscribe.
379 | * @param {String} resultKey The key that will be returned from the resulting response data. If null or undefined, the entire response data will be returned.
380 | * @return {!Promise}
381 | * @private
382 | */
383 | managedSubscribe(manager, opts, resultKey = null) {
384 | return this.subscribe(opts, resultKey).then((obj) => {
385 | manager.trackSubscription(obj._apolloClientSubscription);
386 |
387 | return obj;
388 | });
389 | }
390 |
391 | createQueryManager() {
392 | return new QueryManager(this);
393 | }
394 | }
395 |
396 | export class ApolloErrorWithResponse extends Error {
397 | constructor({ response, errors }) {
398 | let message = 'The server responded with an error.';
399 | super(message);
400 |
401 | this.name = 'ApolloErrorWithResponse';
402 | this.response = response;
403 | this.errors = errors || [];
404 | }
405 | }
406 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | All notable changes to this project will be documented in this file.
4 |
5 | This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6 |
7 | ## v3.2.0
8 |
9 | ### :zap: New Feature
10 |
11 | - Added tracking to the returned result object when assigning data (#399) @kobsy
12 |
13 | ### :package: Dependencies
14 |
15 | - Bump ws from 6.2.1 to 6.2.2 (#400) @dependabot
16 | - Bump lodash from 4.17.20 to 4.17.21 (#396) @dependabot
17 | - Bump handlebars from 4.7.6 to 4.7.7 (#395) @dependabot
18 | - Bump underscore from 1.11.0 to 1.13.1 (#394) @dependabot
19 | - Bump hosted-git-info from 2.8.8 to 2.8.9 (#397) @dependabot
20 |
21 | ---
22 |
23 | #### Contributors
24 |
25 | @dependabot, @dependabot[bot], @josemarluedke and @kobsy
26 |
27 | ---
28 |
29 | For full changes, see the [comparison between v3.1.1 and v3.2.0](https://github.com/ember-graphql/ember-apollo-client/compare/v3.1.1...v3.2.0)
30 |
31 | ## v3.1.1
32 |
33 | ### :bug: Bug Fix
34 |
35 | - Remove webpack configuration for externalising react (#393) @bzf
36 |
37 | ### :package: Dependencies
38 |
39 | - Bump ssri from 6.0.1 to 6.0.2 (#392) @dependabot
40 | - Bump y18n from 4.0.0 to 4.0.1 (#390) @dependabot
41 | - Bump elliptic from 6.5.3 to 6.5.4 (#388) @dependabot
42 |
43 | ---
44 |
45 | #### Contributors
46 |
47 | @bzf, @dependabot, @dependabot[bot] and @josemarluedke
48 |
49 | ---
50 |
51 | For full changes, see the [comparison between v3.1.0 and v3.1.1](https://github.com/ember-graphql/ember-apollo-client/compare/v3.1.0...v3.1.1)
52 |
53 | ## v3.1.0
54 |
55 | ### :zap: New Feature
56 |
57 | - Support in-addon and in-engine options (#386) @bertdeblock
58 |
59 | ### :rocket: Enhancement
60 |
61 | - Update dependencies in blueprint (#387) @bertdeblock
62 |
63 | ### :memo: Documentation
64 |
65 | - Update ember-simple-auth example (#377) @sdahlbac
66 |
67 | ### :package: Dependencies
68 |
69 | - Bump socket.io from 2.3.0 to 2.4.1 (#385) @dependabot
70 | - Bump ini from 1.3.5 to 1.3.7 (#379) @dependabot
71 |
72 | ---
73 |
74 | #### Contributors
75 |
76 | @bertdeblock, @dependabot, @josemarluedke and @sdahlbac
77 |
78 | ---
79 |
80 | For full changes, see the [comparison between v3.0.3 and v3.1.0](https://github.com/ember-graphql/ember-apollo-client/compare/v3.0.3...v3.1.0)
81 |
82 | ## v3.0.3
83 |
84 | ### :rocket: Enhancement
85 |
86 | - Use @ember/test-waiters (#376) @mydea
87 |
88 | ### :package: Dependencies
89 |
90 | - Update broccoli-graphql-filter from 0.4.2 to 1.0.0 (#375) @mydea
91 |
92 | ---
93 |
94 | #### Contributors
95 |
96 | @josemarluedke and @mydea
97 |
98 | ---
99 |
100 | For full changes, see the [comparison between v3.0.2 and v3.1.0](https://github.com/ember-graphql/ember-apollo-client/compare/v3.0.2...v3.1.0)
101 |
102 | ## v3.0.2 - 2020-10-20
103 |
104 | ### :bug: Bug Fix
105 |
106 | - Spread dataToSend array to allow watchQuery using resultKey to update collection (#374) @cloutierlp
107 |
108 | ---
109 |
110 | #### Contributors
111 |
112 | @cloutierlp and @josemarluedke
113 |
114 | ---
115 |
116 | For full changes, see the [comparison between v3.0.1 and v3.0.2](https://github.com/ember-graphql/ember-apollo-client/compare/v3.0.1...v3.0.2)
117 |
118 | ## v3.0.1 - 2020-10-14
119 |
120 | ### :bug: Bug Fix
121 |
122 | - Fix regression: Array is returned as object from resultKey after upgade to v3.0 (#372) @johanrd
123 |
124 | ---
125 |
126 | #### Contributors
127 |
128 | @johanrd and @josemarluedke
129 |
130 | ---
131 |
132 | For full changes, see the [comparison between v3.0.0 and v3.0.1](https://github.com/ember-graphql/ember-apollo-client/compare/v3.0.0...v3.0.1)
133 |
134 | ## v3.0.0 - 2020-09-25
135 |
136 | This is a major version with breaking changes. If have you have your app with the latest v2.x without any deprecations, this upgrade will be straight forward.
137 |
138 | This version upgrades to Apollo Client V3. There are several changes there, please refer to [their migration guide](https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/). The most impacting change for Ember Apollo Client is the changes in imports.
139 |
140 | ### :boom: Breaking Change
141 |
142 | - Upgrade to Apollo Client v3 (#355) @dbbk
143 | - Remove deprecated mixins (#361) @josemarluedke
144 | - Remove deprecated overwriting of options using computed properties (#362) @josemarluedke
145 | - Change default value of keepGraphqlFileExtension and remove deprecation (#363) @josemarluedke
146 |
147 | ## :bug: Bug Fix
148 |
149 | - Allow graphql v15 and tell webpack about react (#365) @josemarluedke
150 |
151 | ### :house: Internal
152 |
153 | - Fix tests on apollo client v3 (#360) @josemarluedke
154 |
155 | ### :package: Dependencies
156 |
157 | - Upgrade project dependencies (#364) @josemarluedke
158 | - Bump node-fetch from 2.6.0 to 2.6.1 (#369) @dependabot
159 | - Upgrade Ember to v3.21 & @apollo/client to v3.2.x (#371) @josemarluedke
160 |
161 | ---
162 |
163 | #### Contributors
164 |
165 | @dbbk, and @josemarluedke
166 |
167 | ---
168 |
169 | For full changes, see the [comparison between v2.2.1 and v3.0.0](https://github.com/ember-graphql/ember-apollo-client/compare/v2.2.1...v3.0.0)
170 |
171 | ## v2.2.1 - 2020-09-25
172 |
173 | ### :bug: Bug Fix
174 |
175 | - Ensure apollo store is cleared when destroying apollo service (#370) @mydea
176 |
177 | ### Contributors
178 |
179 | @mydea
180 |
181 | ---
182 |
183 | For full changes, see the [comparison between v2.2.0 and v2.2.1](https://github.com/ember-graphql/ember-apollo-client/compare/v2.2.0...v2.2.1)
184 |
185 | ## v2.2.0 - 2020-08-04
186 |
187 | ### :zap: New Feature
188 |
189 | - Handle errorPolicy="all" for queries (#338) @mydea
190 |
191 | ### :memo: Documentation
192 |
193 | - add Blake to contributors in readme (#350) @bgentry
194 | - docs: using with typescript (#348) @knownasilya
195 |
196 | ### :house: Internal
197 |
198 | - Add myself to package.json maintainers list (#347) @josemarluedke
199 | - Fix repo URL in package.json (#346) @bgentry
200 |
201 | ### :wrench: Tooling
202 |
203 | - Run CI on Pull Requests (#358) @josemarluedke
204 |
205 | ### :package: Dependencies
206 |
207 | - Bump websocket-extensions from 0.1.3 to 0.1.4 (#352) @dependabot
208 | - Bump lodash from 4.17.15 to 4.17.19 (#354) @dependabot
209 | - Bump elliptic from 6.5.2 to 6.5.3 (#356) @dependabot
210 | - Bump jquery from 3.4.1 to 3.5.0 (#349) @dependabot
211 |
212 | ---
213 |
214 | #### Contributors
215 |
216 | @bgentry, @dependabot, @dependabot[bot], @josemarluedke, @knownasilya and @mydea
217 |
218 | ---
219 |
220 | For full changes, see the [comparison between v2.1.0 and v2.2.0](https://github.com/ember-graphql/ember-apollo-client/compare/v2.1.0...v2.2.0)
221 |
222 | ## v2.1.0 - 2020-04-08
223 |
224 | ### :boom: Breaking Change
225 |
226 | - Upgrade to Ember v3.17 & Drop node v8 (#342) @josemarluedke
227 |
228 | ### :bug: Bug Fix
229 |
230 | - Use WeakMap for storing observables and unsubscribeFn (#343) @josemarluedke
231 |
232 | ### :memo: Documentation
233 |
234 | - Update README to show new fragment import syntax (#344) @josemarluedke
235 |
236 | ### :house: Internal
237 |
238 | - Upgrade to Prettier v2.0.0 (#345) @josemarluedke
239 | - Add tests to make sure refresh a route renders new data (#337) @josemarluedke
240 |
241 | ### :package: Dependencies
242 |
243 | - Bump acorn from 5.7.3 to 5.7.4 (#339) @dependabot
244 |
245 | ---
246 |
247 | #### Contributors
248 |
249 | @dependabot, @dependabot[bot] and @josemarluedke
250 |
251 | ---
252 |
253 | For full changes, see the [comparison between v2.0.0 and v2.1.0](https://github.com/ember-graphql/ember-apollo-client/compare/v2.0.0...v2.1.0)
254 |
255 | ## v2.0.0 - 2019-12-11
256 |
257 | After a long cycle of beta releases and a lot of changes, this is the first
258 | release out of beta of `ember-apollo-client` v2.0.0. We believe the majority of
259 | people using this addon have been using the beta version in production apps for
260 | quite a long time; this release makes it official and recommended to use the
261 | latest version. New apps should use this version and avoid using deprecated features.
262 | For apps using v1.x, please take a look at all the breaking changes. Note that we
263 | have changed the minimum required Ember version.
264 |
265 | Here are all the changes since the last v1 release.
266 |
267 | ### :boom: Breaking Change
268 |
269 | - Don't create `EmberObject` for returned data (#310) @josemarluedke
270 | Before this change, `ember-apollo-client` would always wrap the returned data
271 | from the GraphQL (when not an array) with `EmberObject`. In this PR we removed
272 | that and instead we return plain objects.
273 |
274 | - Remove usage of `Evented` mixin (#313) @josemarluedke
275 | `subscribe` no longer returns an Ember Object and
276 | does not apply the `Evented` Ember mixin. Instead, it just returns an native class and
277 | it triggers an event when new data comes in. You can use this event to add
278 | a listener like so:
279 |
280 | ```js
281 | //import { addListener, removeListener } from '@ember/object/events';
282 |
283 | const result = await this.apollo.subscribe({
284 | subscription: mySubscription,
285 | });
286 |
287 | const handleEvent = (event) => {
288 | console.log('event received', event);
289 | };
290 |
291 | // Add listener to new data
292 | addListener(result, 'event', handleEvent);
293 |
294 | // Remove the listener from new data
295 | removeListener(result, 'event', handleEvent);
296 | ```
297 |
298 | The `lastEvent` property should be accessed directly or use `get` from Ember
299 | Object.
300 |
301 | ```js
302 | console.log(result.lastEvent);
303 |
304 | // or
305 |
306 | // import { get } from '@ember/object';
307 |
308 | console.log(get(result, 'lastEvent'));
309 | ```
310 |
311 | - Remove unused prod dependencies (#306) @josemarluedke
312 | It's not recommended to import dependencies of other dependencies in your
313 | application. Therefore, if you depend on any apollo package that this
314 | addons depends on, you should add to your `package.json`. You should also add
315 | ember-auto-import to make sure you are able to import them.
316 | - Mixins are deprecated in favor of `queryManager` computed macro. (#262) @josemarluedke
317 | - Return the actual returned data, not a copy (#312) @josemarluedke
318 | - `graphql` has been added as a peer dependency and removed from the addon's direct dependency. Please run `ember install ember-apollo-client` to add the default dependencies to your project or run `yarn add -D graphql`.
319 | - If you are using Ember versions 3.4 or 3.5 you must add `ember-native-class-polyfill` to your application. Please run `ember install ember-native-class-polyfill`. Later Ember versions are not required to have this polyfill. (#261) @josemarluedke
320 | - Dropped support for Ember LTS 2.18. We now only support the last LTS version (3.4) and above. (#261) @josemarluedke
321 | - The way to overwrite `clientOptions`, `link` and `chache` has been changed from computed properties to functions. Previous behavior will be removed in the next major version. (#261) @josemarluedke
322 | Please refer to readme for examples.
323 | - Drop support for node.js v6 (#295) @josemarluedke
324 | - Switch from custom webpack build setup to ember-auto-import. (#159) @jasonmit
325 | - The old build configs (`include`, `exclude`) have been removed. Additional dependencies can be used via ember-auto-import and a regular npm install. (#171) @bgentry
326 | - The old, deprecated mixin import paths have been removed. (#171) @bgentry
327 | - The deprecated `middlewares` option has been removed from the apollo service. Users should switch to override `link` instead. (#171) @bgentry
328 |
329 | ## :bug: Bug Fix
330 |
331 | - unsubscribeAll does not forget active subscriptions (#325, #330) @FabHof
332 | - Fix IE 11 Symbol.iterator (#321) @vsergiu93
333 |
334 | ### :rocket: Enhancement
335 |
336 | - Add deprecation for for default value of keepGraphqlFileExtension (#318) @josemarluedke
337 | - Add public alternative to unsubscribe from watchQuery (#310) @josemarluedke
338 | - Upgrade broccoli-graphql-filter to v0.4 to allow new import syntax (#300) @josemarluedke
339 | Before the recommended way was to access a property `_apolloUnsubscribe` from
340 | the result query.
341 | - Add `queryManager` computed macro with support for classic Ember Object and ES6 classes through decorators (decorator syntax requires Ember v3.10.0).
342 | - Add built-in support for GraphQL subscriptions. (#173) @coladarci
343 | - Add configuration options to keep graphql file extension. (#230) @josemarluedke
344 |
345 | ## :memo: Documentation
346 |
347 | - Fix references in the README to apollo docs (#323) @brunoocasali
348 | - Fix documentation for unsubscribeAll(onlyStale) (#320) @dmzza
349 | - Fix documentation about watchQuery (#317) @dmzza
350 | - Clarify status of graphql-tag in README (#314) @jgwhite
351 |
352 | ## :house: Internal
353 |
354 | - Refactor mutation tests to acceptance instead of unit tests (#322) @josemarluedke
355 | - Fix ESLint issues with latest version (#326) @josemarluedke
356 | - Remove Episode GraphQL type from dummy app (#316) @josemarluedke
357 | - Rework tests and dummy app (#315) @josemarluedke
358 | - Cleanup to use async/await and move away from Ember get/set when possible (#309) @josemarluedke
359 | - Add tests with delayed responses (#308) @josemarluedke
360 | - Using nested fragments creates invalid graphql document (#298) @lstrzebinczyk
361 |
362 | ## :wrench: Tooling
363 |
364 | - Only run tests on ubuntu & Improve testem (#329) @josemarluedke
365 | - Run tests in GitHub Actions (#328) @josemarluedke
366 | - Add Release Drafter as GitHub Actions (#307) @josemarluedke
367 | - Refactor testem to avoid test failures (#331) @josemarluedke
368 |
369 | ### :package: Dependencies
370 |
371 | - Upgrade project dependencies & Ember 3.14 (#327) @josemarluedke
372 | - Remove unused dev dep & Upgrade to Ember v3.13 & Cleanup dependencies (#305) @josemarluedke
373 | - Upgrade dependencies (#302) @josemarluedke
374 | - Upgrade to Ember 3.12 & other dependencies (#301) @josemarluedke
375 |
376 | ---
377 |
378 | ### Contributors
379 |
380 | @FabHof, @brunoocasali, @buschtoens, @dmzza, @vsergiu93, @lstrzebinczyk, @jasonmit, @coladarci, @brunoocasali, @jgwhite, @christophermlne, @bgentry and @josemarluedke
381 |
382 | ---
383 |
384 | For full changes, see the [comparison between v2.0.0-beta.8 and v2.0.0](https://github.com/ember-graphql/ember-apollo-client/compare/v1.1.0...v2.0.0)
385 |
386 | ## v2.0.0-beta.8 - 2019-12-11
387 |
388 | ## :bug: Bug Fix
389 |
390 | - unsubscribeAll does not forget active subscriptions (#325, #330) @FabHof
391 |
392 | ## :memo: Documentation
393 |
394 | - Fix references in the README to apollo docs (#323) @brunoocasali
395 |
396 | ## :house: Internal
397 |
398 | - Upgrade project dependencies & Ember 3.14 (#327) @josemarluedke
399 | - Refactor mutation tests to acceptance instead of unit tests (#322) @josemarluedke
400 | - Fix ESLint issues with latest version (#326) @josemarluedke
401 |
402 | ## :wrench: Tooling
403 |
404 | - Only run tests on ubuntu & Improve testem (#329) @josemarluedke
405 | - Run tests in GitHub Actions (#328) @josemarluedke
406 |
407 | ---
408 |
409 | ### Contributors
410 |
411 | @FabHof, @brunoocasali and @josemarluedke
412 |
413 | ## v2.0.0-beta.7 - 2019-10-21
414 |
415 | ### :rocket: Enhancement
416 |
417 | - Add deprecation for for default value of keepGraphqlFileExtension (#318) @josemarluedke
418 |
419 | ### :bug: Bug Fix
420 |
421 | - Fix IE 11 Symbol.iterator (#321) @vsergiu93
422 |
423 | ### :memo: Documentation
424 |
425 | - Fix documentation for unsubscribeAll(onlyStale) (#320) @dmzza
426 | - Fix documentation about watchQuery (#317) @dmzza
427 |
428 | ---
429 |
430 | ### Contributors
431 |
432 | @dmzza, @josemarluedke, @pull and @vsergiu93
433 |
434 | ---
435 |
436 | ## v2.0.0-beta.6 - 2019-10-11
437 |
438 | ### :boom: Breaking Change
439 |
440 | - Don't create EmberObject for returned data (#310) @josemarluedke
441 | Before this change, `ember-apollo-client` would always wrap the returned data
442 | from the GraphQL (when not an array) with `EmberObject`. In this PR we removed
443 | that and instead we return plain objects.
444 |
445 | - Remove usage of Evented mixin (#313) @josemarluedke
446 | `subscribe` no longer returns an Ember Object and
447 | does not apply the Evented Ember mixin. Instead, it just returns an native class and
448 | it triggers an event when new data comes in. You can use this event to add
449 | a listener like so:
450 |
451 | ```js
452 | //import { addListener, removeListener } from '@ember/object/events';
453 |
454 | const result = await this.apollo.subscribe({
455 | subscription: mySubscription,
456 | });
457 |
458 | const handleEvent = (event) => {
459 | console.log('event received', event);
460 | };
461 |
462 | // Add listener to new data
463 | addListener(result, 'event', handleEvent);
464 |
465 | // Remove the listener from new data
466 | removeListener(result, 'event', handleEvent);
467 | ```
468 |
469 | The `lastEvent` property should be accessed directly or use `get` from Ember
470 | Object.
471 |
472 | ```js
473 | console.log(result.lastEvent);
474 |
475 | // or
476 |
477 | // import { get } from '@ember/object';
478 |
479 | console.log(get(result, 'lastEvent'));
480 | ```
481 |
482 | - Remove unused prod dependencies (#306) @josemarluedke
483 | It's not recommended to import dependencies of other dependencies in your
484 | application. Therefore, if you depend on any apollo package that this
485 | addons depends on, you should add to your `package.json`. You should also add
486 | ember-auto-import to make sure you are able to import them.
487 |
488 | - Return the actual returned data, not a copy (#312) @josemarluedke
489 |
490 | ### :rocket: Enhancement
491 |
492 | - Add public alternative to unsubscribe from watchQuery (#310) @josemarluedke
493 | - Upgrade broccoli-graphql-filter to v0.4 to allow new import syntax (#300) @josemarluedke
494 | Before the recommended way was to access a property `_apolloUnsubscribe` from
495 | the result query.
496 |
497 | ### :memo: Documentation
498 |
499 | - Clarify status of graphql-tag in README (#314) @jgwhite
500 |
501 | ### :house: Internal
502 |
503 | - Remove Episode GraphQL type from dummy app (#316) @josemarluedke
504 | - Rework tests and dummy app (#315) @josemarluedke
505 | - Cleanup to use async/await and move away from Ember get/set when possible (#309) @josemarluedke
506 | - Add tests with delayed responses (#308) @josemarluedke
507 | - Using nested fragments creates invalid graphql document (#298) @lstrzebinczyk
508 |
509 | ### :wrench: Tooling
510 |
511 | - Add Release Drafter as GitHub Actions (#307) @josemarluedke
512 |
513 | ### :package: Dependencies
514 |
515 | - Remove unused dev dep & Upgrade to Ember v3.13 & Cleanup dependencies (#305) @josemarluedke
516 | - Upgrade dependencies (#302) @josemarluedke
517 | - Upgrade to Ember 3.12 & other dependencies (#301) @josemarluedke
518 |
519 | ---
520 |
521 | ## [v2.0.0-beta.5] - 2019-08-19
522 |
523 | ### Added
524 |
525 | - Add `queryManager` computed macro with support for classic Ember Object and ES6 classes through decorators (decorator syntax requires Ember v3.10.0).
526 |
527 | ### Deprecated
528 |
529 | - Mixins are deprecated in favor of `queryManager` computed macro.
530 |
531 | ## [v2.0.0-beta.4] - 2019-04-22
532 |
533 | ### Breaking
534 |
535 | - `graphql` has been added as a peer dependency and removed from the addon's direct dependency. Please run `ember install ember-apollo-client` to add the default dependencies to your project or run `yarn add -D graphql`.
536 | - If you are using Ember versions 3.4 or 3.5 you must add `ember-native-class-polyfill` to your application. Please run `ember install ember-native-class-polyfill`. Later Ember versions are not required to have this polyfill.
537 | - Dropped support for Ember LTS 2.18. We now only support the last LTS version (3.4) and above.
538 | - The way to overwrite `clientOptions`, `link` and `chache` has been changed from computed properties to functions. Previous behavior will be removed in the next major version.
539 | - Drop support for node.js v6
540 |
541 | ## [v2.0.0-beta.3] - 2019-03-09
542 |
543 | ### Added
544 |
545 | - Add built-in support for GraphQL subscriptions. Thanks [@coladarci](https://github.com/coladarci)! ([#173](https://github.com/bgentry/ember-apollo-client/pull/173))
546 |
547 | ## [v2.0.0-beta.2] - 2019-02-19
548 |
549 | ### Changed
550 |
551 | - Add configuration options to keep graphql file extension. Thanks [@josemarluedke](https://github.com/josemarluedke)! ([#230](https://github.com/bgentry/ember-apollo-client/pull/230))
552 |
553 | ## [v2.0.0-beta.1] - 2018-09-18
554 |
555 | ### Changed
556 |
557 | - Switch from custom webpack build setup to ember-auto-import. Thanks [@jasonmit](https://github.com/jasonmit)! ([#159](https://github.com/bgentry/ember-apollo-client/pull/159))
558 | - The old build configs (`include`, `exclude`) have been removed. Additional dependencies can be used via ember-auto-import and a regular npm install.
559 | - The old, deprecated mixin import paths have been removed.
560 | - The deprecated `middlewares` option has been removed from the apollo service. Users should switch to override `link` instead.
561 |
562 | ## [v1.1.0] - 2018-09-14
563 |
564 | ### Changed
565 |
566 | - Addon config is now fetched lazily thanks to [@lennyburdette](https://github.com/lennyburdette) in [#166](https://github.com/bgentry/ember-apollo-client/pull/166).
567 | - The old mixin import paths have been deprecated ([#167](https://github.com/bgentry/ember-apollo-client/pull/167)). Thanks [@jasonmit](https://github.com/jasonmit)!
568 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ember-apollo-client
2 |
3 | _Use [@apollo/client][apollo-client] and GraphQL from your Ember app._
4 |
5 | 
6 | [](https://badge.fury.io/js/ember-apollo-client)
7 | [](https://github.com/ember-graphql/ember-apollo-client/actions)
8 | [](https://emberobserver.com/addons/ember-apollo-client)
9 |
10 | This addon is battle tested: it has been used to build several large apps. As such, we've solved real-world problems such as reliable testing and preventing resource leaks by unsubscribing from watch queries.
11 |
12 | ## Installation
13 |
14 | ```
15 | ember install ember-apollo-client
16 | ```
17 |
18 | This should also automatically install `ember-fetch` and `graphql`.
19 |
20 | Install the [Apollo Client Developer tools for Chrome](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm) for a great GraphQL developer experience!
21 |
22 | ## Compatibility
23 |
24 | * Apollo Client v3.0 or above
25 | * Ember.js v3.24 or above
26 | * Ember CLI v2.13 or above
27 | * Node.js v16 or above
28 | * FastBoot 1.0+
29 |
30 | For compatibility with Ember versions below 3.4, use version 1.x.
31 | For compatibility with Apollo Client v1 or v2, use version 1.x or 2.x of this addon.
32 |
33 | ## Configuration
34 |
35 | ### Runtime configuration
36 |
37 | In your app's `config/environment.js`, configure the URL for the GraphQL API.
38 |
39 | ```js
40 | let ENV = {
41 | ...
42 | apollo: {
43 | apiURL: 'https://test.example/graphql',
44 |
45 | // Optionally, set the credentials property of the Fetch Request interface
46 | // to control when a cookie is sent:
47 | // requestCredentials: 'same-origin', // other choices: 'include', 'omit'
48 |
49 | // Optionally, define which service a query manager should use by default:
50 | // defaultQueryManagerService: 'my-custom-apollo-service',
51 | },
52 | ...
53 | }
54 | ```
55 |
56 | Additional configuration of the ApolloClient can be done by extending the Apollo
57 | service and overriding the `clientOptions` property. See the
58 | [Apollo Service API][apollo-service-api] for more info.
59 |
60 | ### Build time configuration
61 |
62 | In your app's `ember-cli-build.js`, you can set build time options for [broccoli-graphql-filter](https://github.com/csantero/broccoli-graphql-filter) to keep or remove file extensions in `.graphql` files.
63 |
64 | ```js
65 | module.exports = function(defaults) {
66 | let app = new EmberApp(defaults, {
67 | emberApolloClient: {
68 | keepGraphqlFileExtension: false
69 | }
70 | });
71 |
72 | return app.toTree();
73 | };
74 |
75 | ```
76 |
77 | `keepGraphqlFileExtension = true`, defaults to `true` – If `false`, creates files called `my-query.js` instead of `my-query.graphql.js`, so that you can import them as `./my-query` instead of `./my-query.graphql`.
78 |
79 | Example:
80 |
81 | ```js
82 | import myQuery from 'my-app/queries/my-query.graphql';
83 | ```
84 |
85 | ### Dependencies
86 |
87 | This addon uses [ember-auto-import](https://github.com/ef4/ember-auto-import) to import dependencies.
88 |
89 | This addon does not exposes any dependencies directly to your application, so
90 | if you desire any additional graphql or apollo dependencies, install them with
91 | npm/yarn and import as desired.
92 |
93 | Here are some useful packages:
94 |
95 | * [@apollo/client][apollo-client]
96 | * [graphql-tag][graphql-tag-repo]
97 | * [graphql-tools][graphql-tools-repo]
98 |
99 | [graphql-repo]: https://github.com/graphql/graphql-js "GraphQL"
100 | [graphql-tag-repo]: https://github.com/apollographql/graphql-tag "graphql-tag"
101 | [graphql-tools-repo]: https://github.com/apollographql/graphql-tools "graphql-tools"
102 |
103 | Make sure to use ember-auto-import in your application to import these
104 | additional packages.
105 |
106 | #### Peer Dependencies
107 |
108 | This addon has a peer dependency of:
109 |
110 | * [graphql][graphql-repo]
111 |
112 | ## Usage
113 |
114 | ### Fetching data
115 |
116 | GraphQL queries should be placed in external files, which are automatically
117 | made available for import:
118 |
119 | `app/gql/queries/human.graphql`
120 |
121 | ```graphql
122 | query human($id: String!) {
123 | human(id: $id) {
124 | name
125 | }
126 | }
127 | ```
128 |
129 | You can also use the `graphql-tag` package to write your queries within your
130 | JS file:
131 |
132 | ```js
133 | import gql from "graphql-tag";
134 |
135 | const query = gql`
136 | query human($id: String!) {
137 | human(id: $id) {
138 | name
139 | }
140 | }
141 | `;
142 | ```
143 |
144 | > **Note:** Inline queries like the one above are compiled at *runtime*. This is
145 | > both slower than external files (which are precompiled) and involves shipping
146 | > extra dependencies in your vendor.js. For the time being, we recommend using
147 | > external files for your queries.
148 | >
149 | > If you are looking for an opportunity to contribute, enabling precompilation
150 | > of inline queries would be a fantastic feature to work on.
151 |
152 | Within your routes, you can query for data using the `queryManager`
153 | computed macro and `watchQuery`:
154 |
155 | `app/routes/some-route.js`
156 |
157 | ```js
158 | import Route from "@ember/routing/route";
159 | import { queryManager } from "ember-apollo-client";
160 | import query from "my-app/gql/queries/human.graphql";
161 |
162 | export default Route.extend({
163 | apollo: queryManager(),
164 |
165 | model(params) {
166 | let variables = { id: params.id };
167 | return this.apollo.watchQuery({ query, variables }, "human");
168 | }
169 | });
170 | ```
171 |
172 | This performs a [`watchQuery` on the ApolloClient][watch-query]. The resulting object is a POJO.
173 |
174 | If a subsequent query (such as a mutation) happens to fetch the same data while
175 | this query's subscription is still active, the object will immediately receive
176 | the latest attributes (just like ember-data).
177 |
178 | Please note that when using `watchQuery`, you must
179 | [unsubscribe][unsubscribing] when you're done with the query data. You should
180 | only have to worry about this if you're using the [Apollo
181 | service][apollo-service-api] directly. If you use the `queryManager` computed macro in your routes, or in your data-loading
182 | components or class that extend `Ember.Object`, all active watch queries are tracked and unsubscribed when the route is exited or the component and Ember.Object is destroyed.
183 |
184 | You can instead use `query` if you just want a single query with a POJO
185 | response and no watch updates.
186 |
187 | If you need to access the Apollo Client [ObservableQuery][observable-query],
188 | such as for pagination, you can retrieve it from a `watchQuery` result using
189 | `getObservable`:
190 |
191 | ```js
192 | import Route from "@ember/routing/route";
193 | import { getObservable, queryManager} from "ember-apollo-client";
194 |
195 | export default Route.extend({
196 | apollo: queryManager(),
197 |
198 | model() {
199 | let result = this.apollo.watchQuery(...);
200 | let observable = getObservable(result);
201 | observable.fetchMore(...) // utilize the ObservableQuery
202 | ...
203 | }
204 | });
205 | ```
206 |
207 | See the [detailed query manager docs][query-manager-api] for more details on
208 | usage, or the [Apollo service API][apollo-service-api] if you need to use
209 | the service directly.
210 |
211 | ### GraphQL Subscriptions
212 |
213 | GQL Subscriptions allow a client to subscribe to specific queries they are interested in tracking. The syntax for doing this is similar to `query` / `watchQuery`, but there are a few main differences:
214 |
215 | - you must define a `subscription` (versus a `query` or `mutation`)
216 | - because subscriptions are async by nature, you have to listen for these events and act accordingly.
217 | - subscriptions require websockets, so must configure your `link` accordingly
218 |
219 | #### Creating your subscription
220 |
221 | `app/gql/subscriptions/new-human.graphql`
222 |
223 | ```graphql
224 | subscription {
225 | newHuman() {
226 | name
227 | }
228 | }
229 | ```
230 |
231 | #### Subscribing from inside a route
232 |
233 | `app/routes/some-route.js`
234 |
235 | ```js
236 | import Route from '@ember/routing/route';
237 | import { queryManager } from 'ember-apollo-client';
238 | import query from 'app/gql/subscriptions/new-human';
239 | import { addListener, removeListener } from '@ember/object/events';
240 |
241 | const handleEvent = event => alert(`${event.name} was just born!`);
242 |
243 | export default Route.extend({
244 | apollo: queryManager(),
245 |
246 | model() {
247 | return this.get('apollo').subscribe({ query }, 'human');
248 | },
249 |
250 | setupController(controller, model) {
251 | addListener(model, 'event', handleEvent);
252 | },
253 |
254 | resetController(controller, isExiting, transition) {
255 | if (isExiting) {
256 | removeListener(controller.model, 'event', handleEvent);
257 | }
258 | }
259 | });
260 | ```
261 |
262 | The big advantage of using the `queryManager` is that when you navigate away from this route, all subscriptions created will be terminated. That said, if you want to manually unsubscribe (or are not using the `queryManager`) `subscription.unsubscribe()` will do the trick.
263 |
264 | **Enabling Websockets**
265 |
266 | While this library should work w/ any back-end implementation, here's an example with Authenticated [Phoenix](https://github.com/phoenixframework/phoenix) + [Absinthe](https://github.com/absinthe-graphql/absinthe):
267 |
268 | `my-app/services/apollo.js`
269 | ```js
270 | import ApolloService from 'ember-apollo-client/services/apollo';
271 | import { inject as service } from '@ember/service';
272 | import { Socket } from 'phoenix';
273 | import { createAbsintheSocketLink } from '@absinthe/socket-apollo-link';
274 | import AbsintheSocket from '@absinthe/socket';
275 |
276 | class OverriddenApollo extends ApolloService {
277 | @service
278 | session;
279 |
280 | link() {
281 | const socket = new Socket("ws://socket-url", {
282 | params: { token: this.get('session.token') },
283 | });
284 | const absintheSocket = AbsintheSocket.create(socket);
285 |
286 | return createAbsintheSocketLink(absintheSocket);
287 | }
288 | }
289 |
290 | ```
291 |
292 | Note: This will switch **all** gql communication to use websockets versus `http`.
293 | If you want to conditionally use websockets for only subscriptions (a common pattern)
294 | this is where [Apollo Link Composition](https://www.apollographql.com/docs/link/composition.html) comes in.
295 | Specifically, the `split` function is what we're after (note we are using
296 | [apollo-utilities](https://www.npmjs.com/package/apollo-utilities), a helpful `npm` package):
297 |
298 | `my-app/services/apollo.js`
299 | ```js
300 | import ApolloService from 'ember-apollo-client/services/apollo';
301 | import { inject as service } from '@ember/service';
302 | import { Socket } from 'phoenix';
303 | import { split } from '@apollo/client';
304 | import { getMainDefinition } from '@apollo/client/utilities';
305 | import { createAbsintheSocketLink } from '@absinthe/socket-apollo-link';
306 | import AbsintheSocket from '@absinthe/socket';
307 |
308 | class OverriddenApollo extends ApolloService {
309 | @service
310 | session;
311 |
312 | link() {
313 | let httpLink = super.link();
314 |
315 | const socket = new Socket("ws://socket-url", {
316 | params: { token: this.get('session.token') },
317 | });
318 | const socketLink = createAbsintheSocketLink(AbsintheSocket.create(socket));
319 |
320 | return split(
321 | ({ query }) => {
322 | const { kind, operation } = getMainDefinition(query);
323 |
324 | return kind === 'OperationDefinition' && operation === 'subscription';
325 | },
326 | socketLink,
327 | httpLink
328 | );
329 | }
330 | }
331 | ```
332 |
333 | Note: You will need to add the following dependencies to your project:
334 |
335 | ```sh
336 | yarn add -D @apollo/client
337 | yarn add -D @absinthe/socket
338 | yarn add -D @absinthe/socket-apollo-link
339 | ```
340 |
341 | ### Mutations and Fragments
342 |
343 | You can perform a mutation using the `mutate` method. You can also use GraphQL
344 | fragments in your queries. This is especially useful if you want to ensure that
345 | you refetch the same attributes in a subsequent query or mutation involving the
346 | same model(s).
347 |
348 | The following example shows both mutations and fragments in action:
349 |
350 | `app/gql/fragments/review-fragment.graphql`
351 |
352 | ```graphql
353 | fragment ReviewFragment on Human {
354 | stars
355 | commentary
356 | }
357 | ```
358 |
359 | `app/gql/mutations/create-review.graphql`
360 |
361 | ```graphql
362 | #import ReviewFragment from 'my-app/gql/fragments/review-fragment.graphql'
363 |
364 | mutation createReview($ep: Episode!, $review: ReviewInput!) {
365 | createReview(episode: $ep, review: $review) {
366 | review {
367 | ...ReviewFragment
368 | }
369 | }
370 | }
371 | ```
372 |
373 | `app/routes/my-route.js`
374 |
375 | ```js
376 | import Route from "@ember/routing/route";
377 | import { inject as service } from "@ember/service";
378 | import mutation from "my-app/gql/mutations/create-review.graphql";
379 |
380 | export default Route.extend({
381 | apollo: service(),
382 |
383 | actions: {
384 | createReview(ep, review) {
385 | let variables = { ep, review };
386 | return this.get("apollo").mutate({ mutation, variables }, "review");
387 | }
388 | }
389 | });
390 | ```
391 |
392 | ### Query manager API
393 |
394 | * `watchQuery(options, resultKey)`: This calls the
395 | [`ApolloClient.watchQuery`][watch-query] method. It returns a promise that
396 | resolves with a POJO. That object will be updated whenever the
397 | `watchQuery` subscription resolves with new data. As before, the `resultKey`
398 | can be used to resolve beneath the root.
399 |
400 | The query manager will automatically unsubscribe from this object.
401 | * `subscribe(options, resultKey)`: This calls the
402 | [`ApolloClient.subscribe`][subscribe] method. It returns a promise that
403 | resolves with an `EmberApolloSubscription`. You can use this object in a few ways to keep
404 | track of your subscription:
405 | - emberApolloSubscription.lastEvent; // return the most recently received event data
406 |
407 | ```js
408 | //import { addListener, removeListener } from '@ember/object/events';
409 |
410 | const result = await this.apollo.subscribe(
411 | {
412 | subscription: mySubscription,
413 | }
414 | );
415 |
416 | const handleEvent = event => {
417 | console.log('event received', event)
418 | };
419 |
420 | // Add listener to new data
421 | addListener(result, 'event', handleEvent);
422 |
423 | // Remove the listener from new data
424 | removeListener(result, 'event', handleEvent);
425 | ```
426 |
427 | As before, the `resultKey` can be used to resolve beneath the root.
428 |
429 | The query manager will automatically unsubscribe from this object. If you want to manually
430 | unsubscribe, you can do so with `emberApolloSubscription.apolloUnsubscribe();`
431 | * `query(options, resultKey)`: This calls the
432 | [`ApolloClient.query`](https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.query)
433 | method. It returns a promise that resolves with the raw POJO data that the
434 | query returns. If you provide a `resultKey`, the resolved data is grabbed from
435 | that key in the result.
436 | * `mutate(options, resultKey)`: This calls the
437 | [`ApolloClient.mutate`](https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.mutate)
438 | method. It returns a promise that resolves with the raw POJO data that the
439 | mutation returns. As with the query methods, the `resultKey` can be used to
440 | resolve beneath the root.
441 |
442 | ### Apollo service API
443 |
444 | You should not need to use the Apollo service directly for most regular
445 | 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
446 | loading data from a service rather than a route or component).
447 |
448 | The `apollo` service has the following public API:
449 |
450 | * `clientOptions`: This function should return the options hash that
451 | will be passed to the `ApolloClient` [constructor][ac-constructor]. You can
452 | override this function to configure the client this service uses:
453 | ```js
454 | class OverriddenApolloService extends ApolloService {
455 | clientOptions() {
456 | return {
457 | link: this.link(),
458 | cache: this.cache(),
459 | };
460 | }
461 | }
462 | ```
463 | * `link`: This function provides a list of [middlewares and afterwares](https://www.apollographql.com/docs/react/advanced/network-layer.html#network-interfaces) to the [Apollo Link](https://www.apollographql.com/docs/link/) the interface for fetching and modifying control flow of GraphQL requests. To create your middlewares/afterwares:
464 |
465 | ```js
466 | link() {
467 | let httpLink = super.link()
468 |
469 | // Middleware
470 | let authMiddleware = setContext(async(request, context) => {
471 | if (!token) {
472 | token = await localStorage.getItem('token') || null;
473 | }
474 |
475 | Object.assign(context.headers, {
476 | headers: {
477 | authorization: token
478 | }
479 | });
480 |
481 | return context;
482 | });
483 |
484 | // Afterware
485 | const resetToken = onError(({ networkError }) => {
486 | if (networkError && networkError.statusCode === 401) {
487 | // remove cached token on 401 from the server
488 | token = undefined;
489 | }
490 | });
491 |
492 | const authFlowLink = authMiddleware.concat(resetToken);
493 |
494 | return authFlowLink.concat(httpLink);
495 | }
496 | ```
497 |
498 | Example with [ember-simple-auth](https://github.com/simplabs/ember-simple-auth):
499 |
500 |
501 | ```js
502 | import ApolloService from 'ember-apollo-client/services/apollo';
503 | import { inject as service } from '@ember/service';
504 | import { setContext } from '@apollo/client/link/context';
505 | import { Promise } from 'rsvp';
506 |
507 | class OverriddenApollo extends ApolloService {
508 | @service
509 | session;
510 |
511 | link() {
512 | let httpLink = super.link();
513 |
514 | let authLink = setContext((request, context) => {
515 | return this._runAuthorize(request, context);
516 | });
517 | return authLink.concat(httpLink);
518 | }
519 |
520 | _runAuthorize() {
521 | if (!this.get('session.isAuthenticated')) {
522 | return {};
523 | }
524 | return new Promise(success => {
525 | let headers = {};
526 | let token = this.get('session.data.authenticated.token');
527 | headers['Authorization'] = `Bearer ${token}`;
528 |
529 | success({ headers });
530 | });
531 | }
532 | }
533 | ```
534 |
535 | Note: You will need to add the following dependencies to your project:
536 |
537 | ```sh
538 | yarn add -D @apollo/client
539 | ```
540 |
541 | * `watchQuery(options, resultKey)`: This calls the
542 | [`ApolloClient.watchQuery`][watch-query] method. It returns a promise that
543 | resolves with a POJO. That object will be updated whenever the
544 | `watchQuery` subscription resolves with new data. As before, the
545 | `resultKey` can be used to resolve beneath the root.
546 |
547 | When using this method, **it is important to [unsubscribe][unsubscribing]**
548 | from the query when you're done with it.
549 |
550 | * `query(options, resultKey)`: This calls the
551 | `ApolloClient.query`
552 | method. It returns a promise that resolves with the raw POJO data that the
553 | query returns. If you provide a `resultKey`, the resolved data is grabbed from
554 | that key in the result.
555 | * `mutate(options, resultKey)`: This calls the
556 | `ApolloClient.mutate`
557 | method. It returns a promise that resolves with the raw POJO data that the
558 | mutation returns. As with the query methods, the `resultKey` can be used to
559 | resolve beneath the root.
560 |
561 | ### Unsubscribing from watch queries
562 |
563 | Apollo Client's `watchQuery` will continue to update the query with new data
564 | whenever the store is updated with new data about the resolved objects. This
565 | happens until you explicitly unsubscribe from it.
566 |
567 | In `ember-apollo-client`, most unsubscriptions are handled automatically by the
568 | `queryManager` computed macro, so long as you use it.
569 |
570 | If you're fetching data elsewhere, such as in an Ember Service, or if you use
571 | the Apollo service directly, you are responsible for unsubscribing from
572 | `watchQuery` results when you're done with them, you can use `unsubscribe`:
573 |
574 | ```js
575 | import Service from "@ember/service";
576 | import { unsubscribe } from "ember-apollo-client";
577 | import { inject as service } from '@ember/service';
578 |
579 | export default Service.extend( {
580 | apollo: service(),
581 | result: null,
582 |
583 | init() {
584 | this._super(...arguments);
585 | this.result = this.apollo.watchQuery(...);
586 | },
587 |
588 | willDestroy() {
589 | unsubscribe(this.result)
590 | }
591 | });
592 | ```
593 |
594 | ### queryManager as decorator
595 |
596 | The `queryManager` computed macro can be used as a decorator when using Ember v3.10.0 or above.
597 |
598 | ```js
599 | import Route from '@ember/routing/route';
600 | import { queryManager } from 'ember-apollo-client'
601 | import query from 'my-app/gql/queries/human.graphql';
602 |
603 | export default class MyAwesomeRoute extends Route {
604 | @queryManager apollo;
605 |
606 | model({ id }) {
607 | let variables = { id };
608 | return this.apollo.watchQuery({ query, variables });
609 | }
610 | }
611 | ```
612 |
613 | ### queryManager options
614 |
615 | The `queryManager` computed macro can accept an options hash with the name of the service to use as apollo.
616 | If your application has a custom apollo service or multiple apollo services that extends from `ember-apollo-client/services/apollo`, you can use this option to specify which apollo service to use.
617 |
618 | ```js
619 | // imports ...
620 |
621 | export default class MyAwesomeRoute extends Route {
622 | @queryManager({ service: 'my-custom-apollo-service' }) apollo;
623 |
624 | // ...
625 | }
626 | ```
627 |
628 | ### Use with Fastboot
629 |
630 | Ember Apollo Client works with FastBoot out of the box as long that SSR is enabled. In order to enable SSR, define it on apollo service:
631 |
632 | Example:
633 |
634 | ```js
635 | class OverriddenApolloService extends ApolloService {
636 | clientOptions() {
637 | const opts = super.clientOptions();
638 | return {...opts, ssrMode: true };
639 | }
640 | }
641 | ```
642 |
643 | Since you only want to fetch each query result once, pass the `ssrMode: true` option to the Apollo Client constructor to avoid repeated force-fetching.
644 |
645 | #### Skipping queries for SSR
646 |
647 | If you want to intentionally skip a query during SSR, you can pass `ssr: false` in the query options. Typically, this will mean the component will get rendered in its loading state on the server. For example:
648 |
649 | ```js
650 | actions: {
651 | refetchModel() {
652 | this.get('apollo').query({
653 | query,
654 | variables,
655 | // Don't run this query on the server
656 | ssr: false
657 | });
658 | }
659 | }
660 | ```
661 |
662 | ### Using With TypeScript
663 |
664 | When using TypeScript (with [ember-cli-typescript](https://github.com/typed-ember/ember-cli-typescript) in your Ember app) you will quickly run into an error like:
665 |
666 | > Cannot find module './users.graphql'.
667 |
668 | This error happens when you import a `*.graphql` file, e.g. `import query from './users.graphql';`.
669 | The quick solution is to use `// @ts-ignore`, but that is only a patch for the one place you've used the import.
670 |
671 | To define basic types for those imports, you need to add the following to `types/global.d.ts`:
672 |
673 | ```ts
674 | // Apollo GraphQL imports
675 | declare module '*.graphql' {
676 | const doc: import('graphql').DocumentNode;
677 | export default doc;
678 | }
679 | ```
680 |
681 | Note: The `graphql` module above is included when you `ember install ember-apollo-client`.
682 |
683 | ### Testing
684 |
685 | This addon is test-ready! All promises from the apollo service are tracked with
686 | `waitForPromise` and `waitForFetch` so your tests should be completely deterministic.
687 |
688 | The dummy app contains example routes for mutations and queries:
689 |
690 | * [Acceptance test for a regular query](https://github.com/ember-graphql/ember-apollo-client/blob/master/tests/acceptance/query-and-unsubscribe-test.js)
691 | * [Route integration test for a mutation with a fragment](https://github.com/ember-graphql/ember-apollo-client/blob/master/tests/unit/routes/new-review-test.js)
692 |
693 | The tests also contain a sample Star Wars GraphQL schema with an
694 | [pretender setup][pretender-setup] for mock data.
695 |
696 | [pretender-setup]: https://github.com/ember-graphql/ember-apollo-client/blob/master/tests/helpers/start-pretender.js
697 |
698 | ## Development
699 |
700 | ### Installation
701 |
702 | * `git clone https://github.com/ember-graphql/ember-apollo-client` this repository
703 | * `cd ember-apollo-client`
704 | * `yarn install`
705 |
706 | ### Linting
707 |
708 | * `yarn run lint:hbs`
709 | * `yarn run lint:js`
710 | * `yarn run lint:js --fix`
711 |
712 | ### Running tests
713 |
714 | * `ember test` – Runs the test suite on the current Ember version
715 | * `ember test --server` – Runs the test suite in "watch mode"
716 | * `ember try:each` – Runs the test suite against multiple Ember versions
717 |
718 | ### Running the dummy application
719 |
720 | * `ember serve`
721 | * Visit the dummy application at [http://localhost:4200](http://localhost:4200).
722 |
723 | For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
724 |
725 | ## Contributors
726 |
727 | A special thanks to the following contributors:
728 |
729 | * Blake Gentry ([@bgentry](https://github.com/bgentry))
730 | * Michael Villander ([@villander](https://github.com/villander))
731 | * Dan Freeman ([@dfreeman](https://github.com/dfreeman))
732 | * Vinícius Sales ([@viniciussbs](https://github.com/viniciussbs))
733 | * Laurin Quast ([@n1ru4l](https://github.com/n1ru4l))
734 | * Elias Balafoutis ([@balaf](https://github.com/balaf))
735 | * Katherine Smith ([@TerminalStar](https://github.com/TerminalStar))
736 | * Greg Coladarci ([@coladarci](https://github.com/coladarci))
737 | * Josemar Luedke ([@josemarluedke](https://github.com/josemarluedke))
738 |
739 | [ac-constructor]: https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClientOptions
740 | [apollo-client]: https://github.com/apollographql/apollo-client
741 | [apollo-service-api]: #apollo-service-api
742 | [observable-query]: https://www.apollographql.com/docs/react/api/apollo-client/#observablequery-functions
743 | [query-manager-api]: #query-manager-api
744 | [unsubscribing]: #unsubscribing-from-watch-queries
745 | [watch-query]: https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClient.watchQuery
746 | [subscribe]: https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClient.subscribe
747 |
748 | ## Contributing
749 |
750 | See the [Contributing](CONTRIBUTING.md) guide for details.
751 |
752 | ## License
753 |
754 | This project is licensed under the [MIT License](LICENSE.md).
755 |
--------------------------------------------------------------------------------
26 |
27 |
28 |