fix: cache queries for not-mounted yet components. It fixes problems with infinite loops after error occurred.

Closes #23

Author: trojanowski

package.json

@@ -55,6 +55,7 @@
     "react": "^16.7.0-alpha.0"
   },
   "dependencies": {
+    "lodash": "^4.17.11",
     "react-fast-compare": "^2.0.2",
     "warning": "^4.0.2"
   },

src/__tests__/useMutation-test.js

@@ -159,7 +159,7 @@ it('should create a function to perform mutations', async () => {
     );
   }
 
-  const client = createClient(TASKS_MOCKS);
+  const client = createClient({ mocks: TASKS_MOCKS });
   const { container } = render(
     <ApolloProvider client={client}>
       <Suspense fallback={<div>Loading</div>}>
@@ -215,7 +215,7 @@ it('should allow to pass options forwarded to the mutation', async () => {
     );
   }
 
-  const client = createClient(TASKS_MOCKS);
+  const client = createClient({ mocks: TASKS_MOCKS });
   const { container, getByTestId } = render(
     <ApolloProvider client={client}>
       <Suspense fallback={<div>Loading</div>}>

src/__tests__/useQuery-test.js

@@ -1,10 +1,7 @@
+import { ApolloLink, Observable } from 'apollo-link';
 import gql from 'graphql-tag';
 import React, { Suspense } from 'react';
-import {
-  cleanup,
-  flushEffects,
-  render,
-} from 'react-testing-library';
+import { cleanup, flushEffects, render } from 'react-testing-library';
 
 import { ApolloProvider, useQuery } from '..';
 import createClient from '../__testutils__/createClient';
@@ -123,13 +120,17 @@ function TasksLoader({ query, ...restOptions }) {
 }
 
 function TasksLoaderWithoutSuspense({ query, ...restOptions }) {
-  const { data, error, loading } = useQuery(query, {
+  const { data, error, errors, loading } = useQuery(query, {
     ...restOptions,
     suspend: false,
   });
+
   if (error) {
     throw error;
   }
+  if (errors) {
+    throw new Error('Errors');
+  }
   if (loading) {
     return 'Loading without suspense';
   }
@@ -139,7 +140,7 @@ function TasksLoaderWithoutSuspense({ query, ...restOptions }) {
 afterEach(cleanup);
 
 it('should return the query data', async () => {
-  const client = createClient(TASKS_MOCKS);
+  const client = createClient({ mocks: TASKS_MOCKS });
   const { container } = render(
     <ApolloProvider client={client}>
       <Suspense fallback={<div>Loading</div>}>
@@ -157,7 +158,7 @@ it('should return the query data', async () => {
 });
 
 it('should work with suspense disabled', async () => {
-  const client = createClient(TASKS_MOCKS);
+  const client = createClient({ mocks: TASKS_MOCKS });
   const { container } = render(
     <ApolloProvider client={client}>
       <TasksLoaderWithoutSuspense query={TASKS_QUERY} />
@@ -173,7 +174,7 @@ it('should work with suspense disabled', async () => {
 });
 
 it('should support query variables', async () => {
-  const client = createClient(TASKS_MOCKS);
+  const client = createClient({ mocks: TASKS_MOCKS });
   const { container } = render(
     <ApolloProvider client={client}>
       <Suspense fallback={<div>Loading</div>}>
@@ -193,7 +194,7 @@ it('should support query variables', async () => {
 });
 
 it('should support updating query variables', async () => {
-  const client = createClient(TASKS_MOCKS);
+  const client = createClient({ mocks: TASKS_MOCKS });
   const { container, getByTestId, queryByTestId, rerender } = render(
     <ApolloProvider client={client}>
       <Suspense fallback={<div data-testid="loading">Loading</div>}>
@@ -235,7 +236,7 @@ it('should support updating query variables', async () => {
 });
 
 it("shouldn't suspend if the data is already cached", async () => {
-  const client = createClient(TASKS_MOCKS);
+  const client = createClient({ mocks: TASKS_MOCKS });
   const { container, getByTestId, queryByTestId, rerender } = render(
     <ApolloProvider client={client}>
       <Suspense fallback={<div>Loading</div>}>
@@ -285,7 +286,7 @@ it("shouldn't suspend if the data is already cached", async () => {
 });
 
 it("shouldn't allow a query with non-standard fetch policy with suspense", async () => {
-  const client = createClient(TASKS_MOCKS);
+  const client = createClient({ mocks: TASKS_MOCKS });
   /* eslint-disable no-console */
   const origConsoleError = console.error;
   console.error = jest.fn();
@@ -304,8 +305,86 @@ it("shouldn't allow a query with non-standard fetch policy with suspense", async
   /* eslint-enable no-console */
 });
 
+it('should forward apollo errors', async () => {
+  class ErrorBoundary extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = { error: null };
+    }
+
+    static getDerivedStateFromError(error) {
+      return { error };
+    }
+
+    render() {
+      if (this.state.error) {
+        // You can render any custom fallback UI
+        return <p>Error occured: {this.state.error.message}</p>;
+      }
+
+      return this.props.children;
+    }
+  }
+
+  const consoleErrorMock = jest
+    .spyOn(console, 'error')
+    .mockImplementation(() => {});
+
+  const linkReturningError = new ApolloLink(() => {
+    return new Observable(observer => {
+      observer.error(new Error('Simulating network error'));
+    });
+  });
+  const client = createClient({ link: linkReturningError });
+
+  const { container } = render(
+    <ErrorBoundary>
+      <ApolloProvider client={client}>
+        <Suspense fallback={<div>Loading</div>}>
+          <TasksLoader query={TASKS_QUERY} />
+        </Suspense>
+      </ApolloProvider>
+    </ErrorBoundary>
+  );
+  expect(container.textContent).toBe('Loading');
+  flushEffects();
+  await waitForNextTick();
+  expect(container.textContent).toBe(
+    'Error occured: Network error: Simulating network error'
+  );
+
+  consoleErrorMock.mockRestore();
+});
+
+it('should ignore apollo errors by default in non-suspense mode', async () => {
+  const consoleErrorMock = jest
+    .spyOn(console, 'error')
+    .mockImplementation(() => {});
+
+  const linkReturningError = new ApolloLink(() => {
+    return new Observable(observer => {
+      observer.error(new Error('Simulating network error'));
+    });
+  });
+  const client = createClient({ link: linkReturningError });
+  const { container } = render(
+    <ApolloProvider client={client}>
+      <TasksLoaderWithoutSuspense query={TASKS_QUERY} />
+    </ApolloProvider>
+  );
+  expect(container.textContent).toBe('Loading without suspense');
+  flushEffects();
+  await waitForNextTick();
+
+  expect(consoleErrorMock).toHaveBeenCalledTimes(1);
+  expect(consoleErrorMock.mock.calls[0][1]).toBe(
+    'Network error: Simulating network error'
+  );
+  consoleErrorMock.mockRestore();
+});
+
 it('shouldn allow a query with non-standard fetch policy without suspense', async () => {
-  const client = createClient(TASKS_MOCKS);
+  const client = createClient({ mocks: TASKS_MOCKS });
   const { container } = render(
     <ApolloProvider client={client}>
       <TasksLoaderWithoutSuspense

src/__testutils__/createClient.js

@@ -2,9 +2,9 @@ import { ApolloClient } from 'apollo-client';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 import { MockLink } from 'apollo-link-mock';
 
-export default function createClient(mocks = []) {
+export default function createClient({ link, mocks = [] } = {}) {
   return new ApolloClient({
     cache: new InMemoryCache(),
-    link: new MockLink(mocks),
+    link: link ? link : new MockLink(mocks),
   });
 }

src/index.js

@@ -2,6 +2,11 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import isEqual from 'react-fast-compare';
 
 import deprecated from './deprecated';
+import objToKey from './objToKey';
+import {
+  getCachedObservableQuery,
+  invalidateCachedObservableQuery,
+} from './queryCache';
 
 const ApolloContext = React.createContext();
 
@@ -15,22 +20,10 @@ export function useApolloClient() {
   return useContext(ApolloContext);
 }
 
-export function useQuery(
-  query,
-  {
-    variables,
-    suspend = true,
-    context: apolloContextOptions,
-    ...restOptions
-  } = {}
-) {
+export function useQuery(query, { suspend = true, ...restOptions } = {}) {
   const client = useApolloClient();
   const [result, setResult] = useState();
   const previousQuery = useRef();
-  // treat variables and context options separately because they are objects
-  // and the other options are JS primitives
-  const previousVariables = useRef();
-  const previousApolloContextOptions = useRef();
   const previousRestOptions = useRef();
   const observableQuery = useRef();
 
@@ -39,17 +32,13 @@ export function useQuery(
       const subscription = observableQuery.current.subscribe(nextResult => {
         setResult(nextResult);
       });
+      invalidateCachedObservableQuery(client, query, restOptions);
 
       return () => {
         subscription.unsubscribe();
       };
     },
-    [
-      query,
-      objToKey(variables),
-      objToKey(previousApolloContextOptions),
-      objToKey(restOptions),
-    ]
+    [query, objToKey(restOptions)]
   );
 
   ensureSupportedFetchPolicy(restOptions.fetchPolicy, suspend);
@@ -65,20 +54,12 @@ export function useQuery(
   if (
     !(
       query === previousQuery.current &&
-      isEqual(variables, previousVariables.current) &&
-      isEqual(apolloContextOptions, previousApolloContextOptions.current) &&
       isEqual(restOptions, previousRestOptions.current)
     )
   ) {
     previousQuery.current = query;
-    previousVariables.current = variables;
-    previousApolloContextOptions.current = apolloContextOptions;
     previousRestOptions.current = restOptions;
-    const watchedQuery = client.watchQuery({
-      query,
-      variables,
-      ...restOptions,
-    });
+    const watchedQuery = getCachedObservableQuery(client, query, restOptions);
     observableQuery.current = watchedQuery;
     const currentResult = watchedQuery.currentResult();
     if (currentResult.partial && suspend) {
@@ -110,19 +91,6 @@ function ensureSupportedFetchPolicy(fetchPolicy, suspend) {
   }
 }
 
-function objToKey(obj) {
-  if (!obj) {
-    return null;
-  }
-  const keys = Object.keys(obj);
-  keys.sort();
-  const sortedObj = keys.reduce((result, key) => {
-    result[key] = obj[key];
-    return result;
-  }, {});
-  return JSON.stringify(sortedObj);
-}
-
 export const useApolloQuery = deprecated(
   useQuery,
   'useApolloQuery is deprecated, please use useQuery'

src/objToKey.js

@@ -0,0 +1,19 @@
+import isPlainObject from 'lodash/isPlainObject';
+
+export default function objToKey(obj) {
+  if (!obj) {
+    return null;
+  }
+  const keys = Object.keys(obj);
+  keys.sort();
+  const sortedObj = keys.reduce((result, key) => {
+    const value = obj[key];
+    if (isPlainObject(value)) {
+      result[key] = objToKey(obj[key]);
+    } else {
+      result[key] = obj[key];
+    }
+    return result;
+  }, {});
+  return JSON.stringify(sortedObj);
+}

src/queryCache.js

@@ -0,0 +1,35 @@
+import { print } from 'graphql/language/printer';
+
+import objToKey from './objToKey';
+
+const cachedQueriesByClient = new WeakMap();
+
+export function getCachedObservableQuery(client, query, options) {
+  const queriesForClient = getCachedQueriesForClient(client);
+  const cacheKey = getCacheKey(query, options);
+  let observableQuery = queriesForClient.get(cacheKey);
+  if (observableQuery == null) {
+    observableQuery = client.watchQuery({ query, ...options });
+    queriesForClient.set(cacheKey, observableQuery);
+  }
+  return observableQuery;
+}
+
+export function invalidateCachedObservableQuery(client, query, options) {
+  const queriesForClient = getCachedQueriesForClient(client);
+  const cacheKey = getCacheKey(query, options);
+  queriesForClient.delete(cacheKey);
+}
+
+function getCachedQueriesForClient(client) {
+  let queriesForClient = cachedQueriesByClient.get(client);
+  if (queriesForClient == null) {
+    queriesForClient = new Map();
+    cachedQueriesByClient.set(client, queriesForClient);
+  }
+  return queriesForClient;
+}
+
+function getCacheKey(query, options) {
+  return `${print(query)}@@${objToKey(options)}`;
+}