Added tracking to the returned result object when assigning data

addon/services/apollo.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import { get, set, setProperties } from '@ember/object';
+import { get, set, setProperties, defineProperty } from '@ember/object';
 import { sendEvent } from '@ember/object/events';
 import RSVP from 'rsvp';
 import Service from '@ember/service';
@@ -16,6 +16,7 @@ import { isNone, isPresent } from '@ember/utils';
 import { run } from '@ember/runloop';
 import { QueryManager } from '../index';
 import { waitForPromise } from '@ember/test-waiters';
+import { tracked } from '@glimmer/tracking';
 
 const apolloObservableWeakMap = new WeakMap();
 const apolloUnsubscribeWeakMap = new WeakMap();
@@ -46,6 +47,20 @@ class EmberApolloSubscription {
   }
 }
 
+class TrackedObject {
+  constructor() {
+    defineProperty(this, 'setUnknownProperty', {
+      configurable: false,
+      enumerable: false,
+      value: function (key, value) {
+        defineProperty(this, key, tracked());
+        this[key] = value;
+      },
+      writable: false,
+    });
+  }
+}
+
 function extractNewData(resultKey, { data, loading }) {
   if (loading && isNone(data)) {
     // This happens when the cache has no data and the data is still loading
@@ -75,7 +90,8 @@ function newDataFunc(observable, resultKey, resolve, unsubscribeFn = null) {
       if (isArray(dataToSend)) {
         obj = A([...dataToSend]);
       } else {
-        obj = { ...dataToSend };
+        obj = new TrackedObject();
+        setProperties(obj, dataToSend);
       }
 
       if (!apolloObservableWeakMap.has(obj)) {

tests/acceptance/watch-query-test.js

@@ -13,6 +13,24 @@ module('Acceptance | watch query', function (hooks) {
     posterPath: '/dM2w364MScsjFf8pfMbaWUcWrR.jpg',
     overview: 'lorem',
     releaseDate: '1994-10-14',
+    reviews: {
+      edges: [],
+      __typename: 'ReviewsConnection',
+    },
+    __typename: 'Movie',
+  };
+
+  const mockReviews = {
+    edges: [
+      {
+        node: {
+          stars: 5,
+          __typename: 'Review',
+        },
+        __typename: 'ReviewEdge',
+      },
+    ],
+    __typename: 'ReviewsConnection',
   };
 
   test('data should be updated when executing a mutation', async function (assert) {
@@ -64,7 +82,10 @@ module('Acceptance | watch query', function (hooks) {
             return new Promise((resolve) => {
               setTimeout(() => {
                 resolve(
-                  Object.assign({}, mockMovie, { title: 'The Godfather' })
+                  Object.assign({}, mockMovie, {
+                    title: 'The Godfather',
+                    reviews: mockReviews,
+                  })
                 );
               }, 200);
             });
@@ -81,11 +102,13 @@ module('Acceptance | watch query', function (hooks) {
     assert.equal(currentURL(), '/movie/680');
 
     assert.dom('.movie-title').hasText('Pulp Fiction');
+    assert.dom('.movie-reviews').hasText('No reviews');
 
     isRefetch = true;
     await click('.refetch-data-using-observable');
 
     assert.dom('.movie-title').hasText('The Godfather');
+    assert.dom('.movie-reviews').hasText('5 stars');
   });
 
   test('refetch using reoute refresh should update template', async function (assert) {

tests/dummy/app/controllers/movie.js

@@ -0,0 +1,9 @@
+import Controller from '@ember/controller';
+
+export default class MovieController extends Controller {
+  get reviews() {
+    return this.model.movie.reviews.edges.map((edge) => {
+      return edge.node;
+    });
+  }
+}

tests/dummy/app/gql/queries/movie.graphql

@@ -6,5 +6,12 @@ query GetMovie($id: ID!) {
     voteAverage
     posterPath
     releaseDate
+    reviews {
+      edges {
+        node {
+          stars
+        }
+      }
+    }
   }
 }

tests/dummy/app/instance-initializers/mock-graphql.js

@@ -115,6 +115,10 @@ function startPretender() {
     Date() {
       return '2019-09-28';
     },
+
+    Int() {
+      return 5;
+    },
   };
 
   let schema = makeExecutableSchema({ typeDefs: schemaString, resolvers });

tests/dummy/app/schema.graphql

@@ -24,6 +24,7 @@ type Movie {
   voteAverage: Float
   posterPath: String
   releaseDate: Date
+  reviews: ReviewsConnection!
 }
 
 # Represents a review for a movie
@@ -35,6 +36,14 @@ type Review {
   commentary: String
 }
 
+type ReviewEdge {
+  node: Review!
+}
+
+type ReviewsConnection {
+  edges: [ReviewEdge]!
+}
+
 # The input object sent when someone is creating a new review
 input ReviewInput {
   # 0-5 stars

tests/dummy/app/templates/movie.hbs

@@ -38,3 +38,11 @@
 </div>
 
 <MovieDetail @movie={{this.model.movie}} />
+
+<div class="movie-reviews">
+  {{#each this.reviews as |review|}}
+    <p>{{review.stars}} stars</p>
+  {{else}}
+    <p>No reviews</p>
+  {{/each}}
+</div>