Merge pull request #1 from JakeGinnivan/change-object-hashing

Replaced object-hash with hash-sum to hopefully get a more determinis…
sevenwestmedia · May 28, 2019 · ad74b93 · ad74b93
2 parents 9e014fe + a2ec123
commit ad74b93
Show file tree

Hide file tree

Showing 11 changed files with 1,282 additions and 1,304 deletions.
diff --git a/example/example.tsx b/example/example.tsx
diff --git a/package.json b/package.json
@@ -28,20 +28,20 @@
     },
     "dependencies": {
         "cuid": "^2.1.6",
-        "object-hash": "^1.3.1",
+        "hash-sum": "^1.0.2",
         "promise-completion-source": "^1.0.0"
     },
     "peerDependencies": {
         "react": "^16.6.0",
-        "typescript-log": "^1.1.0",
-        "tslib": "^1.9.3"
+        "tslib": "^1.9.3",
+        "typescript-log": "^1.1.0"
     },
     "devDependencies": {
         "@types/cuid": "^1.3.0",
         "@types/enzyme": "^3.9.0",
         "@types/enzyme-adapter-react-16": "^1.0.5",
+        "@types/hash-sum": "^1.0.0",
         "@types/jest": "^24.0.12",
-        "@types/object-hash": "^1.2.0",
         "@types/react": "^16.8.6",
         "@types/react-dom": "^16.8.2",
         "enzyme": "^3.8.0",
@@ -58,6 +58,7 @@
         "tslint-eslint-rules": "^5.4.0",
         "tslint-react": "^4.0.0",
         "typescript": "^3.3.3333",
-        "typescript-log": "^1.1.0"
+        "typescript-log": "^1.1.0",
+        "tslib": "^1.9.3"
     }
 }
diff --git a/readme.md b/readme.md
@@ -189,7 +189,13 @@ When you register `resources` they return a DataLoader, a fully type-safe React
 
 You can load multiple DataLoaders in a single page. Each `DataLoader` will fetch the resource once, sharing the data between data-loaders when the parameters match.
 
-The `DataProvider` component  is responsible for fetching the data. When `DataLoader`s are mounted they register with the data provider so it can notify the `DataLoader`s when any relevant data is updated. This means DataLoaders only re-render when the data they are interested in is updated.
+The `DataProvider` component is responsible for fetching the data. When `DataLoader`s are mounted they register with the data provider so it can notify the `DataLoader`s when any relevant data is updated. This means DataLoaders only re-render when the data they are interested in is updated.
+
+### Params hashing
+
+Behind the scenes the data loader uses a library called `hash-sum` to create hashes of the parameter object. You can control which of the data loader params are taken into account by specifying the cache keys (similar to React hooks).
+
+You can override the hashing function on the DataProvider if you have issues with the inbuilt library.
 
 ## More info
 

diff --git a/src/data-loader-store-and-loader.spec.ts b/src/data-loader-store-and-loader.spec.ts
@@ -1,6 +1,7 @@
 import { DataLoaderStoreAndLoader } from './data-loader-store-and-loader'
 import { LoaderStatus, LoaderState } from './data-loader-state'
 import { PromiseCompletionSource } from 'promise-completion-source'
+import hashSum from 'hash-sum'
 
 // These are internal tests, if implementation changes they can be deleted
 
@@ -26,6 +27,7 @@ describe('get data loader state for asynchronous data load', () => {
                 promiseCompletionSource.push(pcs)
                 return pcs.promise
             },
+            hashSum,
             false,
         )
         state = loader.getDataLoaderState(
@@ -293,6 +295,7 @@ describe('get data loader state for synchronous data load', () => {
                 () => {
                     return 42
                 },
+                hashSum,
                 false,
             )
             state = loader.getDataLoaderState(
@@ -337,6 +340,7 @@ describe('get data loader state for synchronous data load', () => {
                 () => {
                     throw new Error('sync data load fail')
                 },
+                hashSum,
                 false,
             )
             state = loader.getDataLoaderState(

diff --git a/src/data-loader-store-and-loader.ts b/src/data-loader-store-and-loader.ts
@@ -1,4 +1,3 @@
-import objectHash from 'object-hash'
 import { DataProviderEvents } from './events'
 import { LoaderState, LoaderStatus } from './data-loader-state'
 import { isPromise } from './utils'
@@ -22,6 +21,9 @@ export interface LoadParams {
     [param: string]: any
 }
 
+/** Takes an object and produces a consistent hash */
+export type ObjectHash = (obj: object) => string
+
 // Some other names
 // DataLoaderDataAccessor
 // DataLoaderCore
@@ -54,6 +56,7 @@ export class DataLoaderStoreAndLoader {
         onEvent: (event: DataProviderEvents) => void | Promise<any>,
         initialState: DataLoaderState | undefined,
         private performLoad: (dataLoadParams: LoadParams) => Promise<any> | any,
+        private objectHash: ObjectHash,
         public isServerSideRender: boolean,
     ) {
         this.onEvent = event => {
@@ -84,7 +87,7 @@ export class DataLoaderStoreAndLoader {
               }, {})
             : dataLoadParams
 
-        return objectHash(cacheParams)
+        return this.objectHash(cacheParams)
     }
 
     attach(

diff --git a/src/data-provider.tsx b/src/data-provider.tsx
@@ -2,14 +2,20 @@ import React from 'react'
 import { DataLoaderResources } from './data-loader-resources'
 import { DataProviderEvents } from './events'
 import { DataLoaderContextComponent } from './data-loader-context'
-import { DataLoaderStoreAndLoader, DataLoaderState } from './data-loader-store-and-loader'
+import {
+    DataLoaderStoreAndLoader,
+    DataLoaderState,
+    ObjectHash,
+} from './data-loader-store-and-loader'
 
 export interface Props {
     initialState?: DataLoaderState
     onEvent?: (event: DataProviderEvents) => void | Promise<any>
     isServerSideRender?: boolean
     resources: DataLoaderResources<any>
     globalProps?: object
+    /** Override the object hashing function */
+    objectHash?: ObjectHash
 }
 
 export class DataLoaderProvider extends React.Component<Props> {
@@ -20,7 +26,7 @@ export class DataLoaderProvider extends React.Component<Props> {
 
         this.dataLoader = new DataLoaderStoreAndLoader(
             // tslint:disable-next-line:no-empty
-            this.props.onEvent || (() => {}),
+            this.props.onEvent || (() => { }),
             this.props.initialState,
             params => {
                 const dataLoader = this.props.resources.getResourceLoader(params.resourceType)
@@ -30,10 +36,11 @@ export class DataLoaderProvider extends React.Component<Props> {
 
                 return dataLoader({
                     ...this.props.globalProps,
-                    ...params
+                    ...params,
                 })
             },
-            this.props.isServerSideRender || false
+            this.props.objectHash || require('hash-sum'),
+            this.props.isServerSideRender || false,
         )
     }
 

diff --git a/tests/__snapshots__/data-loader.csr.spec.tsx.snap b/tests/__snapshots__/data-loader.csr.spec.tsx.snap
@@ -35,7 +35,7 @@ Object {
     },
     Object {
       "state": Object {
-        "fc7e58063ef49874aea8e2210fc7a6a2f9836f52": Object {
+        "247cd170": Object {
           "data": Object {
             "hasData": false,
           },
@@ -50,14 +50,14 @@ Object {
     },
     Object {
       "data": Object {
-        "resourceLoadParamsHash": "fc7e58063ef49874aea8e2210fc7a6a2f9836f52",
+        "resourceLoadParamsHash": "247cd170",
         "resourceType": "testDataType",
       },
       "type": "begin-loading-event",
     },
     Object {
       "state": Object {
-        "fc7e58063ef49874aea8e2210fc7a6a2f9836f52": Object {
+        "247cd170": Object {
           "data": Object {
             "dataFromServerSideRender": false,
             "hasData": true,
@@ -76,14 +76,14 @@ Object {
     },
     Object {
       "data": Object {
-        "resourceLoadParamsHash": "fc7e58063ef49874aea8e2210fc7a6a2f9836f52",
+        "resourceLoadParamsHash": "247cd170",
         "resourceType": "testDataType",
       },
       "type": "end-loading-event",
     },
     Object {
       "data": Object {
-        "resourceLoadParamsHash": "fc7e58063ef49874aea8e2210fc7a6a2f9836f52",
+        "resourceLoadParamsHash": "247cd170",
         "resourceType": "testDataType",
       },
       "type": "data-load-completed",
@@ -94,7 +94,7 @@ Object {
     },
     Object {
       "state": Object {
-        "b85e504b06b7283a19328a521797e110892ab0b4": Object {
+        "26d41825": Object {
           "data": Object {
             "hasData": false,
           },
@@ -109,14 +109,14 @@ Object {
     },
     Object {
       "data": Object {
-        "resourceLoadParamsHash": "b85e504b06b7283a19328a521797e110892ab0b4",
+        "resourceLoadParamsHash": "26d41825",
         "resourceType": "testDataType",
       },
       "type": "begin-loading-event",
     },
     Object {
       "state": Object {
-        "b85e504b06b7283a19328a521797e110892ab0b4": Object {
+        "26d41825": Object {
           "data": Object {
             "dataFromServerSideRender": false,
             "hasData": true,
@@ -135,14 +135,14 @@ Object {
     },
     Object {
       "data": Object {
-        "resourceLoadParamsHash": "b85e504b06b7283a19328a521797e110892ab0b4",
+        "resourceLoadParamsHash": "26d41825",
         "resourceType": "testDataType",
       },
       "type": "end-loading-event",
     },
     Object {
       "data": Object {
-        "resourceLoadParamsHash": "b85e504b06b7283a19328a521797e110892ab0b4",
+        "resourceLoadParamsHash": "26d41825",
         "resourceType": "testDataType",
       },
       "type": "data-load-completed",
@@ -180,7 +180,7 @@ Object {
     },
     Object {
       "state": Object {
-        "fc7e58063ef49874aea8e2210fc7a6a2f9836f52": Object {
+        "247cd170": Object {
           "data": Object {
             "hasData": false,
           },
@@ -195,14 +195,14 @@ Object {
     },
     Object {
       "data": Object {
-        "resourceLoadParamsHash": "fc7e58063ef49874aea8e2210fc7a6a2f9836f52",
+        "resourceLoadParamsHash": "247cd170",
         "resourceType": "testDataType",
       },
       "type": "begin-loading-event",
     },
     Object {
       "state": Object {
-        "fc7e58063ef49874aea8e2210fc7a6a2f9836f52": Object {
+        "247cd170": Object {
           "data": Object {
             "dataFromServerSideRender": false,
             "hasData": true,
@@ -221,14 +221,14 @@ Object {
     },
     Object {
       "data": Object {
-        "resourceLoadParamsHash": "fc7e58063ef49874aea8e2210fc7a6a2f9836f52",
+        "resourceLoadParamsHash": "247cd170",
         "resourceType": "testDataType",
       },
       "type": "end-loading-event",
     },
     Object {
       "data": Object {
-        "resourceLoadParamsHash": "fc7e58063ef49874aea8e2210fc7a6a2f9836f52",
+        "resourceLoadParamsHash": "247cd170",
         "resourceType": "testDataType",
       },
       "type": "data-load-completed",
@@ -266,7 +266,7 @@ Object {
     },
     Object {
       "state": Object {
-        "fc7e58063ef49874aea8e2210fc7a6a2f9836f52": Object {
+        "247cd170": Object {
           "data": Object {
             "hasData": false,
           },
@@ -281,7 +281,7 @@ Object {
     },
     Object {
       "data": Object {
-        "resourceLoadParamsHash": "fc7e58063ef49874aea8e2210fc7a6a2f9836f52",
+        "resourceLoadParamsHash": "247cd170",
         "resourceType": "testDataType",
       },
       "type": "begin-loading-event",