From e22338bf31b5fed6a54d3d3e69270b9cce734538 Mon Sep 17 00:00:00 2001
From: Michael Shafir <michael.shafir@gmail.com>
Date: Mon, 13 Jan 2025 15:55:08 -0500
Subject: [PATCH 1/2] warn about data fetching with undefined keys, and fix bug
 with old content post-error

---
 apps/reactlit-examples/src/mocks/todos.ts         |  6 +++++-
 .../src/pages/todo-list/index.tsx                 | 15 ++++++++++++---
 libs/core/src/plugins/data-fetching.ts            |  8 +++++++-
 libs/core/src/reactlit.tsx                        |  8 ++++----
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/apps/reactlit-examples/src/mocks/todos.ts b/apps/reactlit-examples/src/mocks/todos.ts
index 05528d5..28d29b6 100644
--- a/apps/reactlit-examples/src/mocks/todos.ts
+++ b/apps/reactlit-examples/src/mocks/todos.ts
@@ -12,8 +12,12 @@ export type Todo = {
 export class TodoService {
   constructor(private todos: Todo[], private readonly delay: number = 0) {}
 
-  async getTodos() {
+  async getTodos(fail?: boolean) {
+    console.log('getTodos');
     await wait(this.delay);
+    if (fail) {
+      throw new Error('purposefully failed');
+    }
     return this.todos;
   }
 
diff --git a/apps/reactlit-examples/src/pages/todo-list/index.tsx b/apps/reactlit-examples/src/pages/todo-list/index.tsx
index b2d41a0..89c3d10 100644
--- a/apps/reactlit-examples/src/pages/todo-list/index.tsx
+++ b/apps/reactlit-examples/src/pages/todo-list/index.tsx
@@ -1,11 +1,15 @@
-import { Callout, Spinner } from '@radix-ui/themes';
+import { Button, Callout, Spinner } from '@radix-ui/themes';
 import {
   DataFetchingPlugin,
   defineLayout,
   LayoutPlugin,
   useReactlit,
 } from '@reactlit/core';
-import { BoxContainerWrapper, Inputs } from '@reactlit/radix';
+import {
+  BoxContainerWrapper,
+  DefaultRadixWrapper,
+  Inputs,
+} from '@reactlit/radix';
 import { InfoIcon } from 'lucide-react';
 import { TodoService } from '../../mocks/todos';
 
@@ -37,7 +41,7 @@ const TwoColumnLayout = defineLayout(2, ({ slots: [Slot1, Slot2] }) => {
 export default function TodoList() {
   const Reactlit = useReactlit(LayoutPlugin, DataFetchingPlugin);
   return (
-    <Reactlit>
+    <Reactlit wrapper={DefaultRadixWrapper}>
       {async ({ display, view, set, changed, fetcher, layout }) => {
         display(
           <Callout.Root>
@@ -51,6 +55,11 @@ export default function TodoList() {
           </Callout.Root>
         );
         const todosFetcher = fetcher(['todos'], () => api.getTodos());
+        display(
+          <div>
+            <Button onClick={() => todosFetcher.refetch()}>Refetch</Button>
+          </div>
+        );
         view(
           'adding',
           Inputs.AsyncButton(
diff --git a/libs/core/src/plugins/data-fetching.ts b/libs/core/src/plugins/data-fetching.ts
index bcae7ac..2c75b0b 100644
--- a/libs/core/src/plugins/data-fetching.ts
+++ b/libs/core/src/plugins/data-fetching.ts
@@ -10,7 +10,7 @@ import { definePlugin, ReactlitPlugin } from '../hooks/use-reactlit';
 
 export class DataFetcher<T> {
   constructor(
-    private client: QueryClient,
+    public client: QueryClient,
     private trigger: () => void,
     private key: QueryKey,
     private fn: () => Promise<T>,
@@ -20,6 +20,12 @@ export class DataFetcher<T> {
   ) {}
 
   get() {
+    if (this.key.some((k) => k === undefined)) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'One or more of the data fetching keys are undefined, this can result in unexpected behavior'
+      );
+    }
     const state = this.client.getQueryState(this.key);
     if (state?.status === 'error') {
       throw state.error;
diff --git a/libs/core/src/reactlit.tsx b/libs/core/src/reactlit.tsx
index c1a85b5..d587f1b 100644
--- a/libs/core/src/reactlit.tsx
+++ b/libs/core/src/reactlit.tsx
@@ -270,10 +270,6 @@ export function Reactlit<T extends StateBase = any>({
         debug && console.debug('reactlit rendering:', childArgs.state);
         setRenderState(({ elements }) => ({ elements, position: 0 }));
         await children(childArgs);
-        setRenderState(({ elements, position }) => ({
-          position,
-          elements: elements.slice(0, position),
-        }));
       } catch (e: any) {
         // eslint-disable-next-line no-console
         debug && console.error(e);
@@ -283,6 +279,10 @@ export function Reactlit<T extends StateBase = any>({
           )
         );
       } finally {
+        setRenderState(({ elements, position }) => ({
+          position,
+          elements: elements.slice(0, position),
+        }));
         renderLock.current = false;
         if (renderAfter.current) {
           renderAfter.current = false;

From c1b7dbe9baeb64fdd2f7e483584eb76082a40078 Mon Sep 17 00:00:00 2001
From: Michael Shafir <michael.shafir@gmail.com>
Date: Mon, 13 Jan 2025 15:55:38 -0500
Subject: [PATCH 2/2] docs(changeset): warn about data fetching with undefined
 keys and fix bug with old content post-error

---
 .changeset/nice-turkeys-promise.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/nice-turkeys-promise.md

diff --git a/.changeset/nice-turkeys-promise.md b/.changeset/nice-turkeys-promise.md
new file mode 100644
index 0000000..a332d35
--- /dev/null
+++ b/.changeset/nice-turkeys-promise.md
@@ -0,0 +1,7 @@
+---
+'@reactlit/core': patch
+'@reactlit/radix': patch
+'@reactlit/vanilla': patch
+---
+
+warn about data fetching with undefined keys and fix bug with old content post-error