Merge pull request #69 from oslabs-beta/main

Obsidian v5.0.0 (write through functionality added)

Author: lzhao15

ObsidianWrapper/ObsidianWrapper.jsx

@@ -1,16 +1,30 @@
-import React from 'https://dev.jspm.io/react';
-import Cache from '../src/Browser/CacheClassBrowser.js';
-import { insertTypenames } from '../src/Browser/insertTypenames.js';
+import React from "https://dev.jspm.io/react";
+import BrowserCache from "../src/Browser/CacheClassBrowser.js";
+import { insertTypenames } from "../src/Browser/insertTypenames.js";
 
 const cacheContext = React.createContext();
 
 function ObsidianWrapper(props) {
-  const [cache, setCache] = React.useState(new Cache());
+  const [cache, setCache] = React.useState(new BrowserCache());
+
+  // You have to put your Google Chrome Obsidian developer tool extension id to connect Obsidian Wrapper with dev tool
+  const chromeExtensionId = "dkbfipkapkljpdbhdihnlnbieffhjdmh";
+  window.localStorage.setItem("cache", JSON.stringify(cache));
 
   async function query(query, options = {}) {
+    // dev tool messages
+    const startTime = Date.now();
+    chrome.runtime.sendMessage(chromeExtensionId, { query: query });
+    chrome.runtime.sendMessage(chromeExtensionId, {
+      cache: window.localStorage.getItem("cache"),
+    });
+    console.log(
+      "Here's the message content: ",
+      window.localStorage.getItem("cache")
+    );
     // set the options object default properties if not provided
     const {
-      endpoint = '/graphql',
+      endpoint = "/graphql",
       cacheRead = true,
       cacheWrite = true,
       pollInterval = null,
@@ -36,9 +50,14 @@ function ObsidianWrapper(props) {
       // when the developer decides to only utilize whole query for cache
       if (wholeQuery) resObj = await cache.readWholeQuery(query);
       else resObj = await cache.read(query);
+      console.log("query function resObj: ", resObj);
       // check if query is stored in cache
       if (resObj) {
         // returning cached response as a promise
+        const cacheHitResponseTime = Date.now() - startTime;
+        chrome.runtime.sendMessage(chromeExtensionId, {
+          cacheHitResponseTime: cacheHitResponseTime,
+        });
         return new Promise((resolve, reject) => resolve(resObj));
       }
       // execute graphql fetch request if cache miss
@@ -55,10 +74,10 @@ function ObsidianWrapper(props) {
       try {
         // send fetch request with query
         const resJSON = await fetch(endpoint, {
-          method: 'POST',
+          method: "POST",
           headers: {
-            'Content-Type': 'application/json',
-            Accept: 'application/json',
+            "Content-Type": "application/json",
+            Accept: "application/json",
           },
           body: JSON.stringify({ query }),
         });
@@ -69,6 +88,14 @@ function ObsidianWrapper(props) {
           if (wholeQuery) cache.writeWholeQuery(query, deepResObj);
           else cache.write(query, deepResObj);
         }
+        const cacheMissResponseTime = Date.now() - startTime;
+        chrome.runtime.sendMessage(chromeExtensionId, {
+          cacheMissResponseTime: cacheMissResponseTime,
+        });
+        console.log(
+          "Here's the response time on the front end: ",
+          cacheMissResponseTime
+        );
         return resObj;
       } catch (e) {
         console.log(e);
@@ -80,39 +107,86 @@ function ObsidianWrapper(props) {
   function clearCache() {
     cache.cacheClear();
   }
-  // mutate method, refer to mutate.js for more info
+
+  // breaking out writethrough logic vs. non-writethrough logic
   async function mutate(mutation, options = {}) {
-    // set the options object default properties if not provided
+    // dev tool messages
+    chrome.runtime.sendMessage(chromeExtensionId, {
+      mutation: mutation,
+    });
+    const startTime = Date.now();
     mutation = insertTypenames(mutation);
     const {
-      endpoint = '/graphql',
+      endpoint = "/graphql",
       cacheWrite = true,
       toDelete = false,
       update = null,
+      writeThrough = false,
     } = options;
-    // for any mutation a request to the server is made
     try {
-      const responseObj = await fetch(endpoint, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Accept: 'application/json',
-        },
-        body: JSON.stringify({ query: mutation }),
-      }).then((resp) => resp.json());
-      if (!cacheWrite) return responseObj;
-      // first behaviour when delete cache is set to true
-      if (toDelete) {
-        cache.write(mutation, responseObj, true);
+      if (writeThrough) {
+        // if it's a deletion, then delete from cache and return the object
+        if (toDelete) {
+          const responseObj = await cache.writeThrough(
+            mutation,
+            {},
+            true,
+            endpoint
+          );
+          const deleteMutationResponseTime = Date.now() - startTime;
+          chrome.runtime.sendMessage(chromeExtensionId, {
+            deleteMutationResponseTime: deleteMutationResponseTime,
+          });
+          return responseObj;
+        } else {
+          // for add mutation
+          const responseObj = await cache.writeThrough(
+            mutation,
+            {},
+            false,
+            endpoint
+          );
+          // for update mutation
+          if (update) {
+            // run the update function
+            update(cache, responseObj);
+          }
+          // always write/over-write to cache (add/update)
+          // GQL call to make changes and synchronize database
+          console.log("WriteThrough - true ", responseObj);
+          const addOrUpdateMutationResponseTime = Date.now() - startTime;
+          chrome.runtime.sendMessage(chromeExtensionId, {
+            addOrUpdateMutationResponseTime: addOrUpdateMutationResponseTime,
+          });
+          return responseObj;
+        }
+      } else {
+        // copy-paste mutate logic from 4.
+
+        // use cache.write instead of cache.writeThrough
+        const responseObj = await fetch(endpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+          },
+          body: JSON.stringify({ query: mutation }),
+        }).then((resp) => resp.json());
+        if (!cacheWrite) return responseObj;
+        // first behaviour when delete cache is set to true
+        if (toDelete) {
+          cache.write(mutation, responseObj, true);
+          return responseObj;
+        }
+        // second behaviour if update function provided
+        if (update) {
+          update(cache, responseObj);
+        }
+        // third behaviour just for normal update (no-delete, no update function)
+        cache.write(mutation, responseObj);
+        console.log("WriteThrough - false ", responseObj);
         return responseObj;
       }
-      // second behaviour if update function provided
-      if (update) {
-        update(cache, responseObj);
-      }
-      // third behaviour just for normal update (no-delete, no update function)
-      cache.write(mutation, responseObj);
-      return responseObj;
     } catch (e) {
       console.log(e);
     }

README.md

@@ -27,7 +27,7 @@
 - Configurable caching options, giving you complete control over your cache
 - Fullstack integration, leveraging client-side and server-side caching to streamline your caching strategy
 - Support for the full GraphQL convention
-- Support for server-side cache invalidation
+- Support for client-side and server-side cache invalidation
 - Optional GraphQL DoS attack mitigation security module
 
 ## Overview
@@ -151,9 +151,12 @@ const MovieApp = () => {
 ```
 
 ## Documentation
-
 [obsidian.land](http://obsidian.land)
 
+## Developer Tool
+information and instructions on how to use our developer tool can be found here: <br/>
+[oslabs-beta/obsidian-developer-tool](https://github.com/oslabs-beta/obsidian-developer-tool)
+
 ## Dockerized Demo
 working demo to install locally in docker:    
 [oslabs-beta/obsidian-demo-docker](https://github.com/oslabs-beta/obsidian-demo-docker)
@@ -164,7 +167,11 @@ github for a demo with some example code to play with:
 
 
 ## Authors
-
+[Yurii Shchyrba](https://github.com/YuriiShchyrba)   
+[Linda Zhao](https://github.com/lzhao15)   
+[Ali Fay](https://github.com/ali-fay)   
+[Anthony Guan](https://github.com/guananthony)   
+[Yasir Choudhury](https://github.com/Yasir-Choudhury)   
 [Yogi Paturu](https://github.com/YogiPaturu)   
 [Michael Chin](https://github.com/mikechin37)   
 [Dana Flury](https://github.com/dmflury)