Added caching to DataSync

Fixes digitallyinduced/thin-backend#31

Author: mpscholten

lib/IHP/DataSync/react.js

@@ -5,29 +5,49 @@ import { DataSubscription, DataSyncController } from './ihp-datasync.js';
 // Therefore the default value is true.
 export const AuthCompletedContext = React.createContext(true);
 
+// To avoid too many loading spinners when going backwards and forwards
+// between pages, we cache the result of queries so we can already showing
+// some data directly after a page transition. The data might be a bit
+// outdated, but it will directly be overriden with the latest server state
+// once it has arrived.
+const recordsCache = new Map();
+
 /**
  * Returns the result of the current query in real-time. Returns `null` while the data is still being fetched from the server.
  * @example
  * const messages = useQuery(query('messages').orderBy('createdAt'));
  */
 export function useQuery(queryBuilder) {
-    const [records, setRecords] = useState(null);
+    const [records, setRecords] = useState(() => {
+        const strinigifiedQuery = JSON.stringify(queryBuilder.query);
+        const cachedRecords = recordsCache.get(strinigifiedQuery);
+        return cachedRecords === undefined ? null : cachedRecords;
+    });
     const isAuthCompleted = useContext(AuthCompletedContext);
 
     useEffect(() => {
         if (!isAuthCompleted) {
             return;
         }
+
+        const strinigifiedQuery = JSON.stringify(queryBuilder.query);
+        const cachedRecords = recordsCache.get(strinigifiedQuery);
 
         // Invalidate existing records, as the query might have been changed
-        setRecords(null);
+        setRecords(cachedRecords === undefined ? null : cachedRecords);
 
         const dataSubscription = new DataSubscription(queryBuilder.query);
         dataSubscription.createOnServer();
 
         // The dataSubscription is automatically closed when the last subscriber on
         // the DataSubscription object has been unsubscribed
-        return dataSubscription.subscribe(setRecords);
+
+        return dataSubscription.subscribe(records => {
+            setRecords(records);
+
+            // Update the cache whenever the records change
+            recordsCache.set(strinigifiedQuery, records);
+        });
     }, [
         JSON.stringify(queryBuilder.query) /* <-- It's terrible - but it works, we should find a better for this */,
         isAuthCompleted