feat(core): raw response support (#51)

* feat(core): add raw response support

* test: updated tests

* improvement(example): updated example with 'raw' options usage

* fix(core): fix wrong logic; never using cached json

* test(core): added some tests for raw response

* docs: updated docs to include DataOptions.raw

* test: add tests for preloading raw data

* chore: some cleanups

Author: jackyef

docusaurus/docs/others/data-options.md

@@ -66,6 +66,12 @@ Determines the how the data is handled. A more detailed explanation can be found
 
 Determines whether the data should be fetched or not.
 
+#### `raw`
+* Type: `boolean`
+* Default: `false`
+
+Determines whether to return the `data` as raw response string, or JSON. For example, setting this to `true` will cause the `data` to be a string like `{\"message\":\"Hello world!\"}`.
+
 #### `prefetch`
 * Type: `boolean`
 * Default: `false`

examples/ssr/src/ComponentUsingHook.tsx

@@ -3,7 +3,7 @@ import { useData } from 'react-isomorphic-data';
 
 const Comp = () => {
   const { data } = useData(
-    'http://localhost:3000/some-rest-api/24-hook',
+    'http://localhost:3000/some-rest-api/1/24-hook',
     {},
     {}, // options that can be accepted by the native `fetch` API
     {

examples/ssr/src/Home.tsx

@@ -30,10 +30,7 @@ const Home = () => {
 
   const eagerData = useData(
     'http://localhost:3000/some-rest-api/1',
-    {
-      foo: 'bar',
-      symbols: '!@#$%^&*()////\\\\\\+_+_+_+-==~`'
-    },
+    {},
     {
       headers: {
         'x-custom-header': 'will only be sent for some-rest-api/1 request',
@@ -47,7 +44,10 @@ const Home = () => {
 
   const [fetchData, lazyData] = useLazyData(
     'http://localhost:3000/some-rest-api/2',
-    {},
+    {
+      foo: 'bar',
+      symbols: '!@#$%^&*()////\\\\\\+_+_+_+-==~`'
+    },
     {},
     {
       fetchPolicy: 'network-only',

examples/ssr/src/routes/Siblings/components/SFCWithHook.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { useData } from 'react-isomorphic-data';
 
-const SFCWithHook: React.SFC<{ id: number }> = ({ id }) => {
+const SFCWithHook: React.SFC<{ id: number; raw?: boolean }> = ({
+  id,
+  raw = false,
+}) => {
   const { data, loading, refetch } = useData(
     `http://localhost:3000/some-rest-api/8-24-siblings-${id}`,
     {},
@@ -10,15 +13,19 @@ const SFCWithHook: React.SFC<{ id: number }> = ({ id }) => {
       // additional options
       ssr: true,
       fetchPolicy: 'cache-first',
+      raw,
     },
   );
 
-  console.log({ id, data, loading });
+  console.log({ id, data, loading, raw });
 
   return (
     <>
-      <h1>SFCWithHook, id: {id} <button onClick={refetch}>Refetch</button></h1>
-      {data ? data.randomNumber : 'loading...'}
+      <h1>
+        SFCWithHook, id: {id} raw: {String(raw)}{' '}
+        <button onClick={refetch}>Refetch</button>
+      </h1>
+      {data ? (raw ? data : data.randomNumber) : 'loading...'}
       {String(loading)}
     </>
   );

examples/ssr/src/routes/Siblings/views/main.tsx

@@ -5,9 +5,10 @@ const SiblingsMainView: React.SFC = () => {
   return (
     <>
       <SFCWithHook id={1} />
+      <SFCWithHook id={1} />
+      <SFCWithHook id={1} raw />
       <SFCWithHook id={2} />
       <SFCWithHook id={3} />
-      <SFCWithHook id={1} />
     </>
   );
 };

examples/ssr/src/server.tsx

@@ -99,7 +99,7 @@ server.get('/*', async (req: express.Request, res: express.Response) => {
   // pass the same dataClient instance you are passing to your provider here
   try {
     const start = process.hrtime();
-    markup = await renderToStringWithData(reactApp, dataClient);
+    markup = await renderToStringWithData(reactApp);
     time.push(process.hrtime(start));
 
     getResult();

packages/react-isomorphic-data/src/common/__tests__/preloadData.raw.test.ts

@@ -0,0 +1,103 @@
+import { FetchMock } from 'jest-fetch-mock';
+import preloadData from '../preloadData';
+import { createDataClient } from '../Client';
+
+const fetchMock = fetch as FetchMock;
+
+describe('preloadData tests', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('Should throw a promise when data is not ready yet', async () => {
+    fetchMock.mockResponse(JSON.stringify({ message: 'Hello world!' }));
+    const client = createDataClient({ ssr: false });
+    const url = 'http://localhost:3000/some-rest-api-raw';
+
+    const resource = preloadData(client, url, {}, {}, { raw: true });
+
+    expect(resource.read).toThrow();
+    
+    try {
+      resource.read();
+    } catch (promise) {
+      await promise;
+      
+      expect(resource.read()).toStrictEqual('{\"message\":\"Hello world!\"}');
+    }
+  });
+
+  it('Should throw an error the fetch is rejected', async () => {
+    fetchMock.mockReject(() => Promise.reject('Fabricated error'));
+
+    const client = createDataClient({ ssr: false });
+    const url = 'http://localhost:3000/some-rest-api-raw/2';
+
+    const resource = preloadData(client, url, {}, undefined, { raw: true });
+
+    expect(resource.read).toThrow();
+    
+    try {
+      resource.read();
+    } catch (promise) {
+      await promise;
+     
+      expect(resource.read).toThrow();
+      expect(true).toBe(true);
+    }
+  });
+
+  it('Should use data from cache if available', async () => {
+    fetchMock.mockResponse(JSON.stringify({ message: 'Hello world!' }));
+    const client = createDataClient({ ssr: false });
+    const url = 'http://localhost:3000/some-rest-api-raw/3';
+
+    const resource = preloadData(client, url, {}, {}, { raw: true });
+
+    expect(resource.read).toThrow();
+     
+    try {
+      resource.read();
+    } catch (promise) {
+      await promise;
+     
+      expect(resource.read()).toStrictEqual('{\"message\":\"Hello world!\"}');
+
+      const resource2 = preloadData(client, url, {}, {}, { raw: true });
+
+      expect(resource2.read()).toStrictEqual(resource.read());
+    }
+  });
+
+  it('Should not store data to cache when fetchPolicy is network-only', async () => {
+    fetchMock.mockResponse(JSON.stringify({ message: 'Hello world!' }));
+    const fabricatedError = new Error('Fabricated error');
+    const client = createDataClient({ ssr: false });
+    const url = 'http://localhost:3000/some-rest-api-raw/4';
+
+    const resource = preloadData(client, url, {}, {}, {
+      fetchPolicy: 'network-only',
+      raw: true,
+    });
+
+    expect(resource.read).toThrow();
+    
+    fetchMock.mockReject(fabricatedError);
+    
+    try {
+      resource.read();
+    } catch (promise) {
+      await promise;
+      
+      expect(resource.read()).toStrictEqual('{\"message\":\"Hello world!\"}');
+      
+      const resource2 = preloadData(client, url);
+      
+      expect(resource2.read).toThrowError();
+    }
+  });
+});

packages/react-isomorphic-data/src/common/__tests__/preloadData.test.ts

@@ -32,16 +32,14 @@ describe('preloadData tests', () => {
   });
 
   it('Should throw an error the fetch is rejected', async () => {
-    const fabricatedError = new Error('Fabricated error');
+    fetchMock.mockReject(() => Promise.reject('Fabricated error'));
     const client = createDataClient({ ssr: false });
     const url = 'http://localhost:3000/some-rest-api/2';
 
     const resource = preloadData(client, url);
 
     expect(resource.read).toThrow();
 
-    fetchMock.mockReject(fabricatedError);
-    
     try {
       resource.read();
     } catch (promise) {

packages/react-isomorphic-data/src/common/preloadData.ts

@@ -7,6 +7,7 @@ import qsify from '../utils/querystringify/querystringify.js';
  * Simple cache for preloaded data
  */
 const preloadCache: Record<string, any> = {};
+const preloadJsonCache: Record<string, any> = {};
 
 /**
  * An imperative API to preload data to implement render-as-you-fetch pattern
@@ -28,12 +29,12 @@ const preloadData = (
 
   const promise = !data
     ? fetch(fullUrl, finalFetchOpts)
-        .then((result) => result.json())
-        .then((json) => {
-          data = json;
+        .then((result) => result.text())
+        .then((resText) => {
+          data = resText;
 
           if (fetchPolicy !== 'network-only') {
-            preloadCache[fullUrl] = data;
+            preloadCache[fullUrl] = resText;
           }
 
           fulfilled = true;
@@ -53,7 +54,15 @@ const preloadData = (
       // let a SuspenseBoundary catch this
       throw promise;
     } else {
-      return data;
+      if (dataOpts.raw) {
+        return data;
+      } else {
+        if (!preloadJsonCache[data]) {
+          preloadJsonCache[data] = JSON.parse(data);
+        }
+
+        return preloadJsonCache[data];
+      }
     }
   };
 

packages/react-isomorphic-data/src/common/utils/addToCache.ts

@@ -13,7 +13,8 @@ const addToCache = (cache: Record<string, any>, url: string, data: Record<string
       temp = temp[k];
     } else {
       // add the data
-      temp[k] = data;
+      temp[k] = temp[k] || {};
+      temp[k].__raw = data;
     }
   });