From 1c4ca564e83f2b6686d85f74777e36de86e23df0 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Mon, 17 Oct 2022 13:32:05 +0200 Subject: [PATCH 01/11] Add a staleTime to queries --- packages/toolpad-app/src/runtime/ToolpadApp.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index 0897507cd97..4125a92cf6e 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -890,6 +890,7 @@ const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, + staleTime: 60000, }, }, }); From bb09d1bdffb1dc6c49ad5affff424f182ad4ef2b Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Mon, 17 Oct 2022 13:49:54 +0200 Subject: [PATCH 02/11] Add devtools --- packages/toolpad-app/package.json | 1 + .../toolpad-app/src/runtime/ToolpadApp.tsx | 17 ++++++++++++++ packages/toolpad-app/src/utils/useBoolean.ts | 2 +- yarn.lock | 23 ++++++++++++++++++- 4 files changed, 41 insertions(+), 2 deletions(-) diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index 8af76c6b6dc..6ba2fb45926 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -53,6 +53,7 @@ "@sentry/nextjs": "^7.15.0", "@swc/wasm": "^1.3.6", "@tanstack/react-query": "^4.10.3", + "@tanstack/react-query-devtools": "^4.12.0", "@types/cors": "^2.8.12", "abort-controller": "^3.0.0", "arg": "^5.0.2", diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index 4125a92cf6e..754411ce1d9 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -65,6 +65,14 @@ import { AppModulesProvider, useAppModules } from './AppModulesProvider'; import Pre from '../components/Pre'; import { layoutBoxArgTypes } from '../toolpadComponents/layoutBox'; import NoSsr from '../components/NoSsr'; +import useBoolean from '../utils/useBoolean'; + +const ReactQueryDevtoolsProduction = React.lazy(() => + // eslint-disable-next-line import/extensions + import('@tanstack/react-query-devtools/build/lib/index.prod.js').then((d) => ({ + default: d.ReactQueryDevtools, + })), +); const EMPTY_ARRAY: any[] = []; const EMPTY_OBJECT: any = {}; @@ -918,6 +926,12 @@ export default function ToolpadApp({ React.useEffect(() => setResetNodeErrorsKey((key) => key + 1), [dom]); + const { value: showDevtools, toggle: toggleDevtools } = useBoolean(false); + + React.useEffect(() => { + (window as any).toggleDevtools = () => toggleDevtools(); + }, [toggleDevtools]); + return ( @@ -937,6 +951,9 @@ export default function ToolpadApp({ + {showDevtools ? ( + + ) : null} diff --git a/packages/toolpad-app/src/utils/useBoolean.ts b/packages/toolpad-app/src/utils/useBoolean.ts index acd2711b54a..f6f3c7512b8 100644 --- a/packages/toolpad-app/src/utils/useBoolean.ts +++ b/packages/toolpad-app/src/utils/useBoolean.ts @@ -2,7 +2,7 @@ import * as React from 'react'; export default function useBoolean(initialValue: boolean) { const [value, setValue] = React.useState(initialValue); - const toggle = React.useCallback(() => setValue((existing) => !!existing), []); + const toggle = React.useCallback(() => setValue((existing) => !existing), []); const setTrue = React.useCallback(() => setValue(true), []); const setFalse = React.useCallback(() => setValue(false), []); return { value, setValue, toggle, setTrue, setFalse }; diff --git a/yarn.lock b/yarn.lock index 8201115bacc..20160da8b02 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2596,11 +2596,27 @@ resolved "https://registry.yarnpkg.com/@swc/wasm/-/wasm-1.3.6.tgz#01bae6087bb2458b23c29a5a8ad914c83ec11618" integrity sha512-rFygmNDMl25/t2ETAtFjpcw6acQOm/o4sW/GN0fVPFUdNpI2zr2/oCXpyRM71OUPbXvksy9jXrt7yMZGD65+wQ== +"@tanstack/match-sorter-utils@^8.1.1": + version "8.5.14" + resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.5.14.tgz#12efcd536abe491d09521e0242bc4d51442f8a8a" + integrity sha512-lVNhzTcOJ2bZ4IU+PeCPQ36vowBHvviJb2ZfdRFX5uhy7G0jM8N34zAMbmS5ZmVH8D2B7oU82OWo0e/5ZFzQrw== + dependencies: + remove-accents "0.4.2" + "@tanstack/query-core@4.10.3": version "4.10.3" resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.10.3.tgz#a6477bab9ed1ae4561ca0a59ae06f8c615c692b7" integrity sha512-+ME02sUmBfx3Pjd+0XtEthK8/4rVMD2jcxvnW9DSgFONpKtpjzfRzjY4ykzpDw1QEo2eoPvl7NS8J5mNI199aA== +"@tanstack/react-query-devtools@^4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.12.0.tgz#18f341185f0a5580fc8b2daf8197389108be7131" + integrity sha512-gUV+aKpwgP7Cfp2+vwgu6krXCytncGWjTqFcnzC1l2INOf8dRi8/GEupYF7npxD9ky72FTuxc5+TI/lC8eB0Eg== + dependencies: + "@tanstack/match-sorter-utils" "^8.1.1" + superjson "^1.10.0" + use-sync-external-store "^1.2.0" + "@tanstack/react-query@^4.10.3": version "4.10.3" resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.10.3.tgz#294deefa0fb6ada88bc4631d346ef5d5551c5443" @@ -10441,6 +10457,11 @@ regexpp@^3.2.0: resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2" integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg== +remove-accents@0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5" + integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA== + require-directory@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" @@ -11186,7 +11207,7 @@ sucrase@^3.20.0, sucrase@^3.28.0: pirates "^4.0.1" ts-interface-checker "^0.1.9" -superjson@^1.10.1: +superjson@^1.10.0, superjson@^1.10.1: version "1.10.1" resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.10.1.tgz#9c73e9393489dddab89d638694eadcbf4bda2f36" integrity sha512-7fvPVDHmkTKg6641B9c6vr6Zz5CwPtF9j0XFExeLxJxrMaeLU2sqebY3/yrI3l0K5zJ+H9QA3H+lIYj5ooCOkg== From 4d0b3f4bf37d7967d83e1f8c1f337cd8c2c4dd1a Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Mon, 17 Oct 2022 16:50:28 +0200 Subject: [PATCH 03/11] fix staleTime --- packages/toolpad-app/src/runtime/ToolpadApp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index 754411ce1d9..b80835b184b 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -898,7 +898,7 @@ const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, - staleTime: 60000, + staleTime: 10 * 60 * 1000, }, }, }); From 034acd8bc6be33265fb41f1b89fb2e587059d54e Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Wed, 19 Oct 2022 15:14:07 +0200 Subject: [PATCH 04/11] remove options --- packages/toolpad-app/src/appDom/index.ts | 2 + .../toolpad-app/src/runtime/useDataQuery.ts | 7 +-- .../AppEditor/PageEditor/QueryEditor.tsx | 48 ------------------- 3 files changed, 4 insertions(+), 53 deletions(-) diff --git a/packages/toolpad-app/src/appDom/index.ts b/packages/toolpad-app/src/appDom/index.ts index 1ea4ee35522..18f4f287e1a 100644 --- a/packages/toolpad-app/src/appDom/index.ts +++ b/packages/toolpad-app/src/appDom/index.ts @@ -126,7 +126,9 @@ export interface QueryNode extends AppDomNodeBase { readonly query: ConstantAttrValue; readonly transform?: ConstantAttrValue; readonly transformEnabled?: ConstantAttrValue; + /** @deprecated Not necessary to be user-facing, we will expose staleTime instead if necessary */ readonly refetchOnWindowFocus?: ConstantAttrValue; + /** @deprecated Not necessary to be user-facing, we will expose staleTime instead if necessary */ readonly refetchOnReconnect?: ConstantAttrValue; readonly refetchInterval?: ConstantAttrValue; readonly cacheTime?: ConstantAttrValue; diff --git a/packages/toolpad-app/src/runtime/useDataQuery.ts b/packages/toolpad-app/src/runtime/useDataQuery.ts index 4fc3e7dba37..8612ac041c7 100644 --- a/packages/toolpad-app/src/runtime/useDataQuery.ts +++ b/packages/toolpad-app/src/runtime/useDataQuery.ts @@ -40,7 +40,7 @@ export async function execDataSourceQuery({ export type UseDataQueryConfig = Pick< UseQueryOptions, - 'enabled' | 'refetchOnWindowFocus' | 'refetchOnReconnect' | 'refetchInterval' + 'enabled' | 'refetchInterval' >; export interface UseFetch { @@ -64,10 +64,7 @@ export function useDataQuery( { enabled = true, ...options - }: Pick< - UseQueryOptions, - 'enabled' | 'refetchOnWindowFocus' | 'refetchOnReconnect' | 'refetchInterval' - >, + }: Pick, 'enabled' | 'refetchInterval'>, ): UseFetch { const { appId, version } = useAppContext(); const { savedNodes } = React.useContext(CanvasHooksContext); diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor.tsx index 99a136b984f..5c1f40bf40b 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor.tsx @@ -7,8 +7,6 @@ import { List, ListItem, DialogActions, - Checkbox, - FormControlLabel, TextField, InputAdornment, Divider, @@ -261,19 +259,6 @@ function QueryNodeEditorDialog({ ); }, []); - const handleRefetchOnWindowFocusChange = React.useCallback( - (event: React.ChangeEvent) => { - setInput((existing) => - update(existing, { - attributes: update(existing.attributes, { - refetchOnWindowFocus: appDom.createConst(event.target.checked), - }), - }), - ); - }, - [], - ); - const handleEnabledChange = React.useCallback((newValue: BindableAttrValue | null) => { setInput((existing) => update(existing, { @@ -284,19 +269,6 @@ function QueryNodeEditorDialog({ ); }, []); - const handleRefetchOnReconnectChange = React.useCallback( - (event: React.ChangeEvent) => { - setInput((existing) => - update(existing, { - attributes: update(existing.attributes, { - refetchOnReconnect: appDom.createConst(event.target.checked), - }), - }), - ); - }, - [], - ); - const handleRefetchIntervalChange = React.useCallback( (event: React.ChangeEvent) => { const interval = Number(event.target.value); @@ -419,26 +391,6 @@ function QueryNodeEditorDialog({ onChange={handleEnabledChange} disabled={mode !== 'query'} /> - - } - label="Refetch on window focus" - /> - - } - label="Refetch on network reconnect" - /> s, From 128fa0a5f1fc5edc17b788f005f3aadb1a281c2b Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Wed, 19 Oct 2022 15:28:22 +0200 Subject: [PATCH 05/11] ldskj --- packages/toolpad-app/src/runtime/ToolpadApp.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index 0e9b1a35ae0..3fe07e4d8ae 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -90,8 +90,6 @@ const INITIAL_FETCH: UseFetch = { const USE_DATA_QUERY_CONFIG_KEYS: readonly (keyof UseDataQueryConfig)[] = [ 'enabled', 'refetchInterval', - 'refetchOnReconnect', - 'refetchOnWindowFocus', ]; function usePageNavigator(): NavigateToPage { From fba39946c640d604e2d3237aa3a018ed8bd9ae0e Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Thu, 20 Oct 2022 12:51:34 +0200 Subject: [PATCH 06/11] invalidate while editing --- packages/toolpad-app/src/canvas/index.tsx | 6 ++--- .../src/runtime/CanvasHooksContext.tsx | 3 ++- .../toolpad-app/src/runtime/ToolpadApp.tsx | 3 +-- .../toolpad-app/src/runtime/useDataQuery.ts | 6 +++-- .../AppEditor/PageEditor/EditorCanvasHost.tsx | 4 ++-- .../PageEditor/RenderPanel/RenderPanel.tsx | 9 ++++---- .../toolpad-app/src/toolpad/DomLoader.tsx | 9 ++++---- packages/toolpad-app/src/types.ts | 2 ++ .../toolpad-app/src/utils/insecureHash.ts | 23 +++++++++++++++++++ 9 files changed, 46 insertions(+), 19 deletions(-) create mode 100644 packages/toolpad-app/src/utils/insecureHash.ts diff --git a/packages/toolpad-app/src/canvas/index.tsx b/packages/toolpad-app/src/canvas/index.tsx index 95eaa6bbd27..8dbe91e0962 100644 --- a/packages/toolpad-app/src/canvas/index.tsx +++ b/packages/toolpad-app/src/canvas/index.tsx @@ -2,10 +2,10 @@ import * as React from 'react'; import { fireEvent, setEventHandler } from '@mui/toolpad-core/runtime'; import invariant from 'invariant'; import { throttle } from 'lodash-es'; -import { NodeId, RuntimeEvent } from '@mui/toolpad-core'; +import { RuntimeEvent } from '@mui/toolpad-core'; import ToolpadApp from '../runtime'; import * as appDom from '../appDom'; -import { PageViewState } from '../types'; +import { NodeHashes, PageViewState } from '../types'; import getPageViewState from './getPageViewState'; import { rectContainsPoint } from '../utils/geometry'; import { CanvasHooks, CanvasHooksContext } from '../runtime/CanvasHooksContext'; @@ -13,7 +13,7 @@ import { CanvasHooks, CanvasHooksContext } from '../runtime/CanvasHooksContext'; export interface AppCanvasState { appId: string; dom: appDom.RenderTree; - savedNodes: Record; + savedNodes: NodeHashes; } export interface ToolpadBridge { diff --git a/packages/toolpad-app/src/runtime/CanvasHooksContext.tsx b/packages/toolpad-app/src/runtime/CanvasHooksContext.tsx index e5fcc4395a5..8715c8511ad 100644 --- a/packages/toolpad-app/src/runtime/CanvasHooksContext.tsx +++ b/packages/toolpad-app/src/runtime/CanvasHooksContext.tsx @@ -1,5 +1,6 @@ import { NodeId } from '@mui/toolpad-core'; import * as React from 'react'; +import { NodeHashes } from '../types'; export interface NavigateToPage { (pageNodeId: NodeId): void; @@ -9,7 +10,7 @@ export interface NavigateToPage { * Context created by the app canvas to override behavior for the app editor */ export interface CanvasHooks { - savedNodes?: Record; + savedNodes?: NodeHashes; navigateToPage?: NavigateToPage; } diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index 3fe07e4d8ae..ffaf856729f 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -426,12 +426,11 @@ function QueryNode({ node }: QueryNodeProps) { const bindings = useBindingsContext(); const setControlledBinding = useSetControlledBindingContext(); - const queryId = node.id; const params = resolveBindables(bindings, `${node.id}.params`, node.params); const configBindings = _.pick(node.attributes, USE_DATA_QUERY_CONFIG_KEYS); const options = resolveBindables(bindings, `${node.id}.config`, configBindings); - const queryResult = useDataQuery(queryId, params, options); + const queryResult = useDataQuery(node.id, params, options); React.useEffect(() => { const { isLoading, error, data, rows, ...result } = queryResult; diff --git a/packages/toolpad-app/src/runtime/useDataQuery.ts b/packages/toolpad-app/src/runtime/useDataQuery.ts index 8612ac041c7..8e4ac9730e6 100644 --- a/packages/toolpad-app/src/runtime/useDataQuery.ts +++ b/packages/toolpad-app/src/runtime/useDataQuery.ts @@ -69,7 +69,9 @@ export function useDataQuery( const { appId, version } = useAppContext(); const { savedNodes } = React.useContext(CanvasHooksContext); - const isNodeAvailableOnServer: boolean = savedNodes ? queryId && savedNodes[queryId] : true; + // These are only used by the editor to invalidate caches whenever the query changes during editing + const nodeHash: string | undefined = savedNodes ? savedNodes[queryId] : undefined; + const isNodeAvailableOnServer: boolean = !!nodeHash; const { isLoading, @@ -78,7 +80,7 @@ export function useDataQuery( data: responseData = EMPTY_OBJECT, refetch, } = useQuery( - [appId, version, queryId, params], + [appId, version, nodeHash, queryId, params], ({ signal }) => queryId && execDataSourceQuery({ diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/EditorCanvasHost.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/EditorCanvasHost.tsx index e39ed37541f..be990f66efd 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/EditorCanvasHost.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/EditorCanvasHost.tsx @@ -7,7 +7,7 @@ import ReactDOM from 'react-dom'; import invariant from 'invariant'; import * as appDom from '../../../appDom'; import { HTML_ID_EDITOR_OVERLAY } from '../../../constants'; -import { PageViewState } from '../../../types'; +import { NodeHashes, PageViewState } from '../../../types'; import { ToolpadBridge } from '../../../canvas'; import useEvent from '../../../utils/useEvent'; import { LogEntry } from '../../../components/Console'; @@ -46,7 +46,7 @@ export interface EditorCanvasHostProps { appId: string; pageNodeId: NodeId; dom: appDom.AppDom; - savedNodes: Record; + savedNodes: NodeHashes; onRuntimeEvent?: (event: RuntimeEvent) => void; onConsoleEntry?: (entry: LogEntry) => void; overlay?: React.ReactNode; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderPanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderPanel.tsx index 87291d12950..7a9f7602a94 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderPanel.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderPanel.tsx @@ -5,9 +5,10 @@ import { useNavigate } from 'react-router-dom'; import invariant from 'invariant'; import * as appDom from '../../../../appDom'; import EditorCanvasHost, { EditorCanvasHostHandle } from '../EditorCanvasHost'; -import { getSavedNodes, useDom, useDomApi, useDomLoader } from '../../../DomLoader'; +import { getNodeHashes, useDom, useDomApi, useDomLoader } from '../../../DomLoader'; import { usePageEditorApi, usePageEditorState } from '../PageEditorProvider'; import RenderOverlay from './RenderOverlay'; +import { NodeHashes } from '../../../../types'; const classes = { view: 'Toolpad_View', @@ -37,9 +38,9 @@ export default function RenderPanel({ className }: RenderPanelProps) { const navigate = useNavigate(); - const savedNodes = React.useMemo( - () => getSavedNodes(domLoader.dom, domLoader.savedDom), - [domLoader.dom, domLoader.savedDom], + const savedNodes: NodeHashes = React.useMemo( + () => getNodeHashes(domLoader.savedDom), + [domLoader.savedDom], ); const handleRuntimeEvent = React.useCallback( diff --git a/packages/toolpad-app/src/toolpad/DomLoader.tsx b/packages/toolpad-app/src/toolpad/DomLoader.tsx index 0d716d37481..75c6fc486d5 100644 --- a/packages/toolpad-app/src/toolpad/DomLoader.tsx +++ b/packages/toolpad-app/src/toolpad/DomLoader.tsx @@ -8,6 +8,8 @@ import useShortcut from '../utils/useShortcut'; import useDebouncedHandler from '../utils/useDebouncedHandler'; import { createProvidedContext } from '../utils/react'; import { mapValues } from '../utils/collections'; +import insecureHash from '../utils/insecureHash'; +import { NodeHashes } from '../types'; export type DomAction = | { @@ -233,11 +235,8 @@ export interface DomLoader { saveError: string | null; } -export function getSavedNodes( - dom: appDom.AppDom, - savedDom: appDom.AppDom, -): Record { - return mapValues(dom.nodes, (node) => node === savedDom.nodes[node.id]); +export function getNodeHashes(dom: appDom.AppDom): NodeHashes { + return mapValues(dom.nodes, (node) => insecureHash(JSON.stringify(node))); } const [useDomLoader, DomLoaderProvider] = createProvidedContext('DomLoader'); diff --git a/packages/toolpad-app/src/types.ts b/packages/toolpad-app/src/types.ts index c61da55a63b..62ce95b96bc 100644 --- a/packages/toolpad-app/src/types.ts +++ b/packages/toolpad-app/src/types.ts @@ -155,3 +155,5 @@ export interface AppTheme { export type VersionOrPreview = 'preview' | number; export type AppTemplateId = 'blank' | 'stats' | 'images'; + +export type NodeHashes = Record; diff --git a/packages/toolpad-app/src/utils/insecureHash.ts b/packages/toolpad-app/src/utils/insecureHash.ts new file mode 100644 index 00000000000..f10313684cb --- /dev/null +++ b/packages/toolpad-app/src/utils/insecureHash.ts @@ -0,0 +1,23 @@ +/** + * Returns a hash code for a string. + * (Compatible to Java's String.hashCode()) + * + * The hash code for a string object is computed as + * s[0]*31^(n-1) + s[1]*31^(n-2) + ... + s[n-1] + * using number arithmetic, where s[i] is the i th character + * of the given string, n is the length of the string, + * and ^ indicates exponentiation. + * (The hash value of the empty string is zero.) + * + * Do not use in a security critical context. + * + * @see https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0 + */ +export default function insecureHash(str: string) { + let h = 0; + for (let i = 0; i < str.length; i += 1) { + // eslint-disable-next-line no-bitwise + h = (Math.imul(31, h) + str.charCodeAt(i)) | 0; + } + return h; +} From 549843894e89af78ee276ab1941cd29548c46003 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Thu, 20 Oct 2022 14:37:29 +0200 Subject: [PATCH 07/11] reset staleTime --- packages/toolpad-app/src/runtime/ToolpadApp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index ffaf856729f..bd2d48ae70b 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -877,7 +877,7 @@ const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, - staleTime: 10 * 60 * 1000, + staleTime: 0, }, }, }); From cb2ff858dcfdc1490ee41c7ba4caaa33dc6ddae5 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Thu, 20 Oct 2022 14:38:02 +0200 Subject: [PATCH 08/11] fix type --- packages/toolpad-app/src/runtime/useDataQuery.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/runtime/useDataQuery.ts b/packages/toolpad-app/src/runtime/useDataQuery.ts index 8e4ac9730e6..9a48033c9eb 100644 --- a/packages/toolpad-app/src/runtime/useDataQuery.ts +++ b/packages/toolpad-app/src/runtime/useDataQuery.ts @@ -70,7 +70,7 @@ export function useDataQuery( const { savedNodes } = React.useContext(CanvasHooksContext); // These are only used by the editor to invalidate caches whenever the query changes during editing - const nodeHash: string | undefined = savedNodes ? savedNodes[queryId] : undefined; + const nodeHash: number | undefined = savedNodes ? savedNodes[queryId] : undefined; const isNodeAvailableOnServer: boolean = !!nodeHash; const { From 068964cfbc41e49796eabf7bfe290ab64c103d08 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Thu, 20 Oct 2022 15:31:15 +0200 Subject: [PATCH 09/11] 10s --- packages/toolpad-app/src/runtime/ToolpadApp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index bd2d48ae70b..193a6b3a3f7 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -877,7 +877,7 @@ const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, - staleTime: 0, + staleTime: 10 * 1000, }, }, }); From 9af81df9a7e4cc1e653425e34cc644a1fbd330dd Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Thu, 20 Oct 2022 15:35:44 +0200 Subject: [PATCH 10/11] fix deploy --- packages/toolpad-app/src/runtime/useDataQuery.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/runtime/useDataQuery.ts b/packages/toolpad-app/src/runtime/useDataQuery.ts index 9a48033c9eb..4331e0f08aa 100644 --- a/packages/toolpad-app/src/runtime/useDataQuery.ts +++ b/packages/toolpad-app/src/runtime/useDataQuery.ts @@ -71,7 +71,7 @@ export function useDataQuery( // These are only used by the editor to invalidate caches whenever the query changes during editing const nodeHash: number | undefined = savedNodes ? savedNodes[queryId] : undefined; - const isNodeAvailableOnServer: boolean = !!nodeHash; + const isNodeAvailableOnServer: boolean = savedNodes ? !!savedNodes[queryId] : true; const { isLoading, From bb05585852780af6de91482941631a1f31057afa Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Thu, 20 Oct 2022 16:07:58 +0200 Subject: [PATCH 11/11] 1 min --- packages/toolpad-app/src/runtime/ToolpadApp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index 193a6b3a3f7..9aa6ca4d113 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -877,7 +877,7 @@ const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, - staleTime: 10 * 1000, + staleTime: 60 * 1000, }, }, });