Merge pull request #467 from apollostack/loading_state

Added loading state tracking
apollographql · Aug 2, 2016 · e65e1e8 · e65e1e8
2 parents 145588a + dcd2566
commit e65e1e8
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@ Expect active development and potentially significant breaking changes in the `0
 
 ### vNEXT
 - Fixed issue with alias names in batched queries. [PR #493](https://github.com/apollostack/apollo-client/pull/493) and [Issue #490](https://github.com/apollostack/apollo-client/issues).
+- Add loading state tracking within Apollo Client in order to simplify the handling of loading state within the view layers. [Issue #342](https://github.com/apollostack/apollo-client/issues/342) and [PR #467](https://github.com/apollostack/apollo-client/pull/467)
 
 ### v0.4.9
 

diff --git a/src/QueryManager.ts b/src/QueryManager.ts
@@ -319,6 +319,7 @@ export class QueryManager {
                 returnPartialData: options.returnPartialData || options.noFetch,
                 fragmentMap: queryStoreValue.fragmentMap,
               }),
+              loading: queryStoreValue.loading,
             };
 
             if (observer.next) {
@@ -760,7 +761,7 @@ export class QueryManager {
 
             // return a chainable promise
             this.removeFetchQueryPromise(requestId);
-            resolve({ data: resultFromStore });
+            resolve({ data: resultFromStore, loading: false });
           }).catch((error: Error) => {
             this.store.dispatch({
               type: 'APOLLO_QUERY_ERROR',

diff --git a/src/index.ts b/src/index.ts
@@ -94,9 +94,10 @@ export {
 
 export type ApolloQueryResult = {
   data: any;
-  // Right now only has one property, but will later include loading state, and possibly other info
-  // This is different from the GraphQLResult type because it doesn't include errors - those are
-  // thrown via the standard promise/observer catch mechanism
+  loading: boolean;
+
+  // This type is different from the GraphQLResult type because it doesn't include errors.
+  // Those are thrown via the standard promise/observer catch mechanism.
 }
 
 // A map going from the name of a fragment to that fragment's definition.

diff --git a/test/QueryManager.ts b/test/QueryManager.ts
@@ -2533,7 +2533,7 @@ describe('QueryManager', () => {
       });
 
       queryManager.fetchQuery('bad-id', { query, fragments }).then((result) => {
-        assert.deepEqual(result, { data });
+        assert.deepEqual(result.data, data);
         done();
       });
     });
@@ -2741,7 +2741,7 @@ describe('QueryManager', () => {
       reduxRootKey: 'apollo',
     });
     queryManager.query({ query }).then((result) => {
-      assert.deepEqual(result, { data });
+      assert.deepEqual(result.data, data);
 
       queryManager.query({ query, forceFetch: true }).then(() => {
         done(new Error('Returned a result when it was not supposed to.'));
@@ -2878,11 +2878,11 @@ describe('QueryManager', () => {
      handle.subscribe({
       next(result) {
         timesFired += 1;
-        assert.deepEqual(result, { data });
+        assert.deepEqual(result.data, data);
       },
     });
     queryManager.query({ query }).then((result) => {
-      assert.deepEqual(result, { data });
+      assert.deepEqual(result.data, data);
       assert.equal(timesFired, 1);
       done();
     });
@@ -3170,6 +3170,116 @@ describe('QueryManager', () => {
       done();
     }, 120);
   });
+
+  describe('loading state', () => {
+    it('should be passed as false if we are not watching a query', (done) => {
+      const query = gql`
+        query {
+          fortuneCookie
+        }`;
+      const data = {
+        fortuneCookie: 'Buy it',
+      };
+      const queryManager = new QueryManager({
+        networkInterface: mockNetworkInterface({
+          request: { query },
+          result: { data },
+        }),
+        store: createApolloStore(),
+        reduxRootKey: 'apollo',
+      });
+      queryManager.query({ query }).then((result) => {
+        assert(!result.loading);
+        assert.deepEqual(result.data, data);
+        done();
+      });
+    });
+
+    it('should be passed to the observer as true if we are returning partial data', () => {
+      const primeQuery = gql`
+        query {
+          fortuneCookie
+        }`;
+      const primeData = {
+        fortuneCookie: 'You must stick to your goal but rethink your approach',
+      };
+      const query = gql`
+        query {
+          fortuneCookie
+          author {
+            name
+          }
+        }`;
+      const diffQuery = gql`
+        query {
+          author {
+            name
+          }
+        }`;
+      const diffData = {
+        author: {
+          name: 'John',
+        },
+      };
+      const queryManager = new QueryManager({
+        networkInterface: mockNetworkInterface(
+          {
+            request: { query: diffQuery },
+            result: { data: diffData },
+            delay: 5,
+          },
+          {
+            request: { query: primeQuery },
+            result: { data: primeData },
+          }
+        ),
+        store: createApolloStore(),
+        reduxRootKey: 'apollo',
+      });
+      queryManager.query({ query: primeQuery }).then((primeResult) => {
+        const handle = queryManager.watchQuery({ query, returnPartialData: true });
+
+        handle.subscribe({
+          next(result) {
+            assert(result.loading);
+            assert.deepEqual(result.data, { data: diffData } );
+          },
+        });
+      });
+    });
+
+    it('should be passed to the observer as false if we are returning all the data', () => {
+      const query = gql`
+        query {
+          author {
+            firstName
+            lastName
+          }
+        }`;
+      const data = {
+        author: {
+          firstName: 'John',
+          lastName: 'Smith',
+        },
+      };
+      const queryManager = new QueryManager({
+        networkInterface: mockNetworkInterface(
+          {
+            request: { query },
+            result: { data },
+          }
+        ),
+        store: createApolloStore(),
+        reduxRootKey: 'apollo',
+      });
+      const handle = queryManager.watchQuery({ query, returnPartialData: false });
+      handle.subscribe({
+        next(result) {
+          assert(!result.loading);
+        },
+      });
+    });
+  });
 });
 
 function testDiffing(

diff --git a/test/client.ts b/test/client.ts
@@ -213,7 +213,7 @@ describe('client', () => {
 
     return client.query({ query })
       .then((result) => {
-        assert.deepEqual(result, { data });
+        assert.deepEqual(result.data, data);
       });
   });
 
@@ -257,7 +257,7 @@ describe('client', () => {
 
     return client.query({ query })
       .then((result) => {
-        assert.deepEqual(result, { data });
+        assert.deepEqual(result.data, data);
       });
   });
 
@@ -296,7 +296,7 @@ describe('client', () => {
 
     return client.query({ query })
       .then((result) => {
-        assert.deepEqual(result, { data });
+        assert.deepEqual(result.data, data);
       });
   });
 
@@ -376,7 +376,7 @@ describe('client', () => {
 
     return client.query({ query })
       .then((result) => {
-        assert.deepEqual(result, { data });
+        assert.deepEqual(result.data, data);
         assert.deepEqual(initialState, client.store.getState());
       });
   });
@@ -424,7 +424,7 @@ describe('client', () => {
 
     return client.query({ query })
       .then((result) => {
-        assert.deepEqual(result, { data });
+        assert.deepEqual(result.data, data);
       });
   });
   it('should return errors correctly for a single query', () => {
@@ -860,7 +860,7 @@ describe('client', () => {
 
       return client.query({ query })
         .then((result) => {
-          assert.deepEqual(result, { data });
+          assert.deepEqual(result.data, data);
           assert.deepEqual(client.store.getState()['apollo'].data['1'],
             {
               id: '1',
@@ -891,7 +891,7 @@ describe('client', () => {
 
       return client.query({ query })
         .then((result) => {
-          assert.deepEqual(result, { data });
+          assert.deepEqual(result.data, data);
           assert.deepEqual(store.getState()['apollo'].data['1'],
             {
               id: '1',
@@ -1260,7 +1260,7 @@ describe('client', () => {
         }`);
 
       client.query({ query: queryDoc, fragments: fragmentDefs }).then((result) => {
-        assert.deepEqual(result, { data });
+        assert.deepEqual(result.data, data);
         done();
       });
     });
@@ -1346,7 +1346,7 @@ describe('client', () => {
       const observer = client.watchQuery({ query: queryDoc, fragments: fragmentDefs });
       observer.subscribe({
         next(result) {
-          assert.deepEqual(result, { data });
+          assert.deepEqual(result.data, data);
           done();
         },
       });
@@ -1392,7 +1392,7 @@ describe('client', () => {
         { query: queryDoc, pollInterval: 30, fragments: fragmentDefs});
       const subscription = observer.subscribe({
         next(result) {
-          assert.deepEqual(result, { data });
+          assert.deepEqual(result.data, data);
           subscription.unsubscribe();
           done();
         },

diff --git a/test/scheduler.ts b/test/scheduler.ts
@@ -163,7 +163,7 @@ describe('QueryScheduler', () => {
     let subscription = observableQuery.subscribe({
       next(result) {
         timesFired += 1;
-        assert.deepEqual(result, { data });
+        assert.deepEqual(result.data, data);
         subscription.unsubscribe();
       },
     });
@@ -472,7 +472,7 @@ describe('QueryScheduler', () => {
     const subscription = observable.subscribe({
       next(result) {
         timesFired += 1;
-        assert.deepEqual(result, { data });
+        assert.deepEqual(result.data, data);
         subscription.unsubscribe();
         assert.equal(Object.keys(scheduler.registeredQueries).length, 0);
       },