fix(cacheMiddleware): do not cache responses with errors by default (#35

)

* [cacheMiddleware] Do not cache responses with errors

* Add option on cacheMiddleware to allow store errors

* Update README.

README.md

@@ -91,6 +91,7 @@ import { RelayNetworkLayer } from 'react-relay-network-modern/es';
   * `allowMutations` - allow to cache Mutation requests (default: `false`)
   * `allowFormData` - allow to cache FormData requests (default: `false`)
   * `clearOnMutation` - clear the cache on any Mutation (default: `false`)
+  * `cacheErrors` - cache responses with errors (default: `false`)
 * **authMiddleware** - for adding auth token, and refreshing it if gets 401 response from server.
   * `token` - string which returns token. Can be function(req) or Promise. If function is provided, then it will be called for every request (so you may change tokens on fly).
   * `tokenRefreshPromise`: - function(req, res) which must return promise or regular value with a new token. This function is called when server returns 401 status code. After receiving a new token, middleware re-run query to the server seamlessly for Relay.

src/__mocks__/mockReq.js

@@ -6,7 +6,7 @@ import type RelayResponse from '../RelayResponse';
 
 type ReqData = {
   query?: string,
-  varaibles?: Object,
+  variables?: Object,
   files?: any,
 };
 
@@ -36,7 +36,7 @@ class MockReq {
   }
 
   getVariables(): Object {
-    return this.reqData.varaibles || {};
+    return this.reqData.variables || {};
   }
 
   getFiles(): any {

src/middlewares/__tests__/cache-test.js

@@ -142,4 +142,46 @@ describe('middlewares/cache', () => {
     expect(res2.data).toBe('PAYLOAD');
     expect(fetchMock.calls('/graphql')).toHaveLength(2);
   });
+
+  it('do not use cache for responses with errors', async () => {
+    fetchMock.mock({
+      matcher: '/graphql',
+      response: {
+        status: 200,
+        body: { data: 'PAYLOAD', errors: [{ type: 'timeout' }] },
+      },
+      method: 'POST',
+    });
+
+    const rnl = new RelayNetworkLayer([cacheMiddleware()]);
+
+    // try fetch
+    await expect(mockReq('FirstQuery').execute(rnl)).rejects.toThrow();
+    expect(fetchMock.calls('/graphql')).toHaveLength(1);
+
+    // try fetch again
+    await expect(mockReq('FirstQuery').execute(rnl)).rejects.toThrow();
+    expect(fetchMock.calls('/graphql')).toHaveLength(2);
+  });
+
+  it('use cache for responses with errors and cacheErrors flag', async () => {
+    fetchMock.mock({
+      matcher: '/graphql',
+      response: {
+        status: 200,
+        body: { data: 'PAYLOAD', errors: [{ type: 'timeout' }] },
+      },
+      method: 'POST',
+    });
+
+    const rnl = new RelayNetworkLayer([cacheMiddleware({ cacheErrors: true })]);
+
+    // try fetch
+    await expect(mockReq('FirstQuery').execute(rnl)).rejects.toThrow();
+    expect(fetchMock.calls('/graphql')).toHaveLength(1);
+
+    // try fetch again
+    await expect(mockReq('FirstQuery').execute(rnl)).rejects.toThrow();
+    expect(fetchMock.calls('/graphql')).toHaveLength(1);
+  });
 });

src/middlewares/cache.js

@@ -11,10 +11,11 @@ type CacheMiddlewareOpts = {|
   allowMutations?: boolean,
   allowFormData?: boolean,
   clearOnMutation?: boolean,
+  cacheErrors?: boolean,
 |};
 
 export default function queryMiddleware(opts?: CacheMiddlewareOpts): Middleware {
-  const { size, ttl, onInit, allowMutations, allowFormData, clearOnMutation } = opts || {};
+  const { size, ttl, onInit, allowMutations, allowFormData, clearOnMutation, cacheErrors } = opts || {};
   const cache = new QueryResponseCache({
     size: size || 100, // 100 requests
     ttl: ttl || 15 * 60 * 1000, // 15 minutes
@@ -43,7 +44,9 @@ export default function queryMiddleware(opts?: CacheMiddlewareOpts): Middleware
       const variables = req.getVariables();
       const res = await next(req);
 
-      cache.set(queryId, variables, res);
+      if (!res.errors || (res.errors && cacheErrors)) {
+        cache.set(queryId, variables, res);
+      }
       return res;
     }
 
@@ -57,7 +60,9 @@ export default function queryMiddleware(opts?: CacheMiddlewareOpts): Middleware
       }
 
       const res = await next(req);
-      cache.set(queryId, variables, res);
+      if (!res.errors || (res.errors && cacheErrors)) {
+        cache.set(queryId, variables, res);
+      }
 
       return res;
     } catch (e) {