Added tracking to POJO returned when assigning new data

addon/services/apollo.js

@@ -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 'tracked-built-ins';
 
 const apolloObservableWeakMap = new WeakMap();
 const apolloUnsubscribeWeakMap = new WeakMap();
@@ -75,7 +76,7 @@ function newDataFunc(observable, resultKey, resolve, unsubscribeFn = null) {
       if (isArray(dataToSend)) {
         obj = A([...dataToSend]);
       } else {
-        obj = { ...dataToSend };
+        obj = tracked({ ...dataToSend });
       }
 
       if (!apolloObservableWeakMap.has(obj)) {

package.json

@@ -38,7 +38,8 @@
     "@ember/test-waiters": "^2.3.0",
     "broccoli-graphql-filter": "^1.0.0",
     "ember-auto-import": "^1.6.0",
-    "ember-cli-babel": "^7.22.1"
+    "ember-cli-babel": "^7.22.1",
+    "tracked-built-ins": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",

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/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>