Implement endpoint caching through Query

Author: egeriis

src/Query.js

@@ -6,58 +6,78 @@ import React, { type Node, PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { readEndpoint } from 'redux-json-api';
 import DataSet from './DataSet';
+import QueryCache from './QueryCache';
 
 export type RenderProp = ({
+  error?: Error,
   loading: boolean,
   resources: Array<JSONAPIResource>
 }) => Node
 
 type Props = {|
+  cacheEnabled: boolean,
   children: RenderProp,
   dispatch: (...any) => any,
   endpoint: string,
 |};
 
 type State = {|
+  error?: Error,
   loading: boolean,
   resourceIds: Array<JSONAPIResourceIdentifier>,
 |};
 
-class Query extends PureComponent<Props, State> {
+export class Query extends PureComponent<Props, State> {
+  static defaultProps = {
+    cacheEnabled: false,
+  };
+
   state = {
+    error: undefined,
     loading: false,
     resourceIds: [],
   };
 
   componentDidMount() {
-    console.log('componentDidMount');
+    const { cacheEnabled, endpoint } = this.props;
+
+    if (!cacheEnabled) {
+      this.fetchData(endpoint, cacheEnabled);
+      return;
+    }
 
-    this.fetchData();
+    try {
+      QueryCache.getEndpointCache(endpoint);
+    } catch (_) {
+      this.fetchData(endpoint, cacheEnabled);
+    }
   }
 
-  fetchData = async () => {
-    const { dispatch, endpoint } = this.props;
+  fetchData = async (endpoint: string, cache: boolean = true) => {
+    const { dispatch } = this.props;
     this.setState({ loading: true });
     try {
       const { body: { data } } = await dispatch(readEndpoint(endpoint));
       const resources = Array.isArray(data) ? data : [data];
-      console.log('resources', resources);
+      const resourceIds = resources.map(({ id, type }) => ({ id, type }));
 
       this.setState({
         loading: false,
-        resourceIds: resources.map(({ id, type }) => ({ id, type })),
+        resourceIds,
       });
-    } catch (e) {
-      console.error(e);
 
-      this.setState({ loading: false });
+      if (cache) {
+        QueryCache.cacheEndpoint(endpoint, resourceIds);
+      }
+    } catch (error) {
+      this.setState({ error, loading: false });
     }
   };
 
   render() {
-    const { loading, resourceIds } = this.state;
+    const { error, loading, resourceIds } = this.state;
     return (
-      <DataSet loading={loading} resourceIds={resourceIds}>
+      <DataSet error={error} loading={loading} resourceIds={resourceIds}>
         {this.props.children}
       </DataSet>
     );

src/QueryCache.js

@@ -0,0 +1,21 @@
+/* @flow strict-local */
+
+import type { JSONAPIResourceIdentifier } from 'json-api';
+
+type ResourceIds = Array<JSONAPIResourceIdentifier>;
+
+export default class QueryCache {
+  static cachedEndpoints: Map<string, ResourceIds> = new Map();
+
+  static cacheEndpoint(endpoint: string, resourceIds: ResourceIds) {
+    QueryCache.cachedEndpoints.set(endpoint, resourceIds);
+  }
+
+  static getEndpointCache(endpoint: string) {
+    if (QueryCache.cachedEndpoints.has(endpoint)) {
+      return QueryCache.cachedEndpoints.get(endpoint);
+    }
+
+    throw new Error('Endpoint not cached');
+  }
+}

src/__tests__/Query.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { readEndpoint } from 'redux-json-api';
 import { mount, shallow } from 'enzyme';
-import Query from '../Query';
+import { Query } from '../Query';
 import { mockStore } from './utils';
 
 let mockReadEndpoint;
@@ -15,12 +15,17 @@ jest.mock('redux-json-api', () => ({
 
 beforeEach(() => {
   props = {
+    cacheEnabled: false,
     children: () => <div />,
     dispatch: jest.fn(io => io),
     endpoint: '/posts',
   };
 
-  mockReadEndpoint = Promise.resolve({ data: [] });
+  mockReadEndpoint = Promise.resolve({ body: { data: [] } });
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
 });
 
 it('renders without throwing', () => {
@@ -41,9 +46,7 @@ it('calls readEndpoint with given path', () => {
 it('saves ids of returned resources to state', async () => {
   mockReadEndpoint = Promise.resolve({
     body: {
-      data: [
-        { type: 'users', id: '1', attributes: { name: 'Wonderwoman' } },
-      ],
+      data: [{ type: 'users', id: '1', attributes: { name: 'Wonderwoman' } }],
     },
   });
   const wrapper = shallow(<Query {...props} />);
@@ -57,7 +60,9 @@ it('updates loading state upon fetch initialization', () => {
 });
 
 it('updates loading state when fetch has succeeded', async () => {
-  mockReadEndpoint = Promise.resolve({ data: { type: 'users', id: '1' } });
+  mockReadEndpoint = Promise.resolve({
+    body: { data: { type: 'users', id: '1' } },
+  });
   const wrapper = shallow(<Query {...props} />);
   await mockReadEndpoint;
   expect(wrapper.state('loading')).toBe(false);
@@ -69,3 +74,13 @@ it('updates loading state when fetch fails', async () => {
   await mockReadEndpoint;
   expect(wrapper.state('loading')).toBe(false);
 });
+
+it('only makes once request for same endpoint when requested more times', async () => {
+  mockReadEndpoint = Promise.resolve({
+    body: { data: { type: 'users', id: '1' } },
+  });
+  shallow(<Query {...props} cacheEnabled />);
+  await mockReadEndpoint;
+  shallow(<Query {...props} cacheEnabled />);
+  expect(readEndpoint).toHaveBeenCalledTimes(1);
+});