Fetching and error bug

.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

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;
   }
 

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(

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;

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;