fix(package/solid): Prevents Suspense leaking (#2006)

* chore(examples/solid): avoid props destructuring in solid

https://discord.com/channels/722131463138705510/1268525091759722537/1277109914354847795

* fix(package/solid): added more tests and enhanced suspense support

.changeset/five-terms-collect.md.md

@@ -0,0 +1,5 @@
+---
+'@gqty/solid': patch
+---
+
+Prevents Suspense leaking

examples/solid/src/components/tailwindui/Skeleton.tsx

@@ -4,8 +4,8 @@ export type Props = ParentProps<{
   fallback?: JSX.Element;
 }>;
 
-const Skeleton: Component<Props> = ({ children, fallback }) => {
-  return <>{children ?? fallback}</>;
+const Skeleton: Component<Props> = (props) => {
+  return <>{props.children ?? props.fallback}</>;
 };
 
 export default Skeleton;

examples/solid/src/components/tailwindui/SmallText.tsx

@@ -1,7 +1,7 @@
 import type { Component, ParentProps } from 'solid-js';
 import Skeleton from './Skeleton';
 
-const SmallText: Component<ParentProps> = ({ children }) => (
+const SmallText: Component<ParentProps> = (props) => (
   <p class="text-xs text-gray-500 dark:text-gray-400">
     <Skeleton
       fallback={
@@ -21,7 +21,7 @@ const SmallText: Component<ParentProps> = ({ children }) => (
         </span>
       }
     >
-      {children}
+      {props.children}
     </Skeleton>
   </p>
 );

examples/solid/src/components/tailwindui/Text.tsx

@@ -1,7 +1,7 @@
 import type { Component, ParentProps } from 'solid-js';
 import Skeleton from './Skeleton';
 
-const Text: Component<ParentProps> = ({ children }) => (
+const Text: Component<ParentProps> = (props) => (
   <Skeleton
     fallback={
       <span
@@ -21,7 +21,7 @@ const Text: Component<ParentProps> = ({ children }) => (
       </span>
     }
   >
-    {children}
+    {props.children}
   </Skeleton>
 );
 

packages/solid/src/query.ts

@@ -278,29 +278,26 @@ export const createQuery = <Schema extends BaseGeneratedSchema>(
       });
     }
 
-    return Object.assign(
-      () => resource.latest?.query ?? resource()?.query ?? accessor.query,
-      {
-        $state: {
-          get loading() {
-            return resource.loading;
-          },
-          get error() {
-            return resource.error;
-          },
+    return Object.assign(() => resource()?.query ?? accessor.query, {
+      $state: {
+        get loading() {
+          return resource.loading;
         },
-        $refetch: async (ignoreCache = true) => {
-          if (resolvePromise) {
-            return;
-          }
+        get error() {
+          return resource.error;
+        },
+      },
+      $refetch: async (ignoreCache = true) => {
+        if (resolvePromise) {
+          return;
+        }
 
-          // Always replace current selections with those from last successful
-          // fetch for user-triggered refetches.
-          restorePreviousSelections();
+        // Always replace current selections with those from last successful
+        // fetch for user-triggered refetches.
+        restorePreviousSelections();
 
-          return await $refetch({ ignoreCache });
-        },
-      }
-    );
+        return await $refetch({ ignoreCache });
+      },
+    });
   };
 };