fix(renderer): Update blocks using use state.

packages/renderer/src/Renderer.js

@@ -27,7 +27,6 @@ import createLogout from './utils/auth/createLogout';
 import OpenIdCallback from './utils/auth/OpenIdCallback';
 import DisplayMessage from './page/DisplayMessage';
 import Page from './page/Page';
-import createUpdateBlock from './page/block/updateBlock';
 import parseJwt from './utils/auth/parseJwt';
 
 const lowdefy = {
@@ -37,6 +36,7 @@ const lowdefy = {
   inputs: {},
   link: () => {},
   localStorage,
+  updaters: {},
   window,
 };
 
@@ -106,12 +106,12 @@ const Home = ({ lowdefy }) => {
 };
 
 const Root = ({ gqlUri }) => {
+  lowdefy.updateBlock = (blockId) => lowdefy.updaters[blockId] && lowdefy.updaters[blockId]();
   lowdefy.client = useGqlClient({ gqlUri, lowdefy });
   lowdefy.auth = {
     login: createLogin(lowdefy),
     logout: createLogout(lowdefy),
   };
-  lowdefy.updateBlock = createUpdateBlock(lowdefy.client);
   lowdefy.user = {};
   const idToken = lowdefy.localStorage.getItem('idToken');
   if (idToken) {

packages/renderer/src/page/block/Block.js

@@ -14,16 +14,19 @@
   limitations under the License.
 */
 
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 
 import { ErrorBoundary } from '@lowdefy/block-tools';
 
 import LoadBlock from './LoadBlock';
 import LoadingBlock from './LoadingBlock';
 import CategorySwitch from './CategorySwitch';
-import WatchCache from './WatchCache';
 
 const Block = ({ block, Blocks, context, lowdefy }) => {
+  const [updates, setUpdate] = useState(0);
+  useEffect(() => {
+    lowdefy.updaters[block.id] = () => setUpdate(updates + 1);
+  });
   const Loading = (
     <LoadingBlock
       blockId={block.blockId}
@@ -38,19 +41,13 @@ const Block = ({ block, Blocks, context, lowdefy }) => {
           meta={block.meta}
           Loading={Loading}
           render={(Comp) => (
-            <WatchCache
+            <CategorySwitch
               block={block}
+              Blocks={Blocks}
+              Component={Comp}
+              context={context}
               lowdefy={lowdefy}
-              Loading={Loading}
-              render={() => (
-                <CategorySwitch
-                  Component={Comp}
-                  block={block}
-                  Blocks={Blocks}
-                  context={context}
-                  lowdefy={lowdefy}
-                />
-              )}
+              updates={updates}
             />
           )}
         />

packages/renderer/src/page/block/WatchCache.js

@@ -1,42 +0,0 @@
-/*
-  Copyright 2020-2021 Lowdefy, Inc
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-*/
-
-import { useQuery, gql } from '@apollo/client';
-
-const getBlock = gql`
-  query getBlock($id: String!) {
-    block(id: $id) @client {
-      id
-      t
-    }
-  }
-`;
-
-const WatchCache = ({ block, render, lowdefy, Loading }) => {
-  const { loading, error } = useQuery(getBlock, {
-    variables: {
-      id: `BlockClass:${block.id}`,
-    },
-    client: lowdefy.client,
-  });
-
-  if (loading) return Loading;
-  if (error) throw error;
-
-  return render();
-};
-
-export default WatchCache;

packages/renderer/src/page/block/updateBlock.js

@@ -1,42 +0,0 @@
-/*
-  Copyright 2020-2021 Lowdefy, Inc
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-*/
-
-import { gql } from '@apollo/client';
-
-const SET_BLOCK_UPDATE_CACHE = gql`
-  fragment BlockClassFragment on BlockClass @client {
-    id
-    t
-  }
-`;
-
-const createUpdateBlock = (client) => {
-  const updateBlock = (blockId) => {
-    client.writeFragment({
-      id: `BlockClass:${blockId}`,
-      fragment: SET_BLOCK_UPDATE_CACHE,
-      data: {
-        id: blockId,
-        t: Date.now(),
-        __typename: 'BlockClass',
-      },
-    });
-  };
-
-  return updateBlock;
-};
-
-export default createUpdateBlock;