@@ -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,
 dis: (...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 { dis, endpoint } = this.props;
+fetchData = async (endpoint: string, cache: boolean = true) => {
+const { dis } = this.props;
 this.setState({ loading: true });
 try {
 const { body: { data } } = await dis(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>
 );

@@ -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');
+}
+}

@@ -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 />,
 dis: 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);
+});