feat: hook for pre-loading queries (#127)

.changeset/old-goats-confess.md

@@ -0,0 +1,5 @@
+---
+"@reactive-dot/react": minor
+---
+
+Added hook for pre-loading queries.

apps/example/package.json

@@ -16,6 +16,7 @@
     "@walletconnect/modal": "^2.6.2",
     "@walletconnect/universal-provider": "^2.14.0",
     "date-fns": "^3.6.0",
+    "jotai-devtools": "^0.10.1",
     "polkadot-api": "^1.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

apps/example/src/app.tsx

@@ -24,6 +24,7 @@ import {
   useWallets,
 } from "@reactive-dot/react";
 import { formatDistance } from "date-fns";
+import { DevTools } from "jotai-devtools";
 import { Binary } from "polkadot-api";
 import { Suspense, useState, useTransition } from "react";
 import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
@@ -428,6 +429,7 @@ export function App() {
         <Example chainName="Westend" />
       </ReDotChainProvider>
       <Toaster />
+      <DevTools />
     </ReDotProvider>
   );
 }

apps/example/vite.config.ts

@@ -3,5 +3,11 @@ import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react({
+      babel: {
+        presets: ["jotai/babel/preset"],
+      },
+    }),
+  ],
 });

packages/react/src/hooks/use-query-loader.ts

@@ -0,0 +1,64 @@
+import { queryPayloadAtomFamily } from "../stores/query.js";
+import type { ChainHookOptions } from "./types.js";
+import { useChainId_INTERNAL } from "./use-chain-id.js";
+import {
+  type ChainId,
+  type Chains,
+  type CommonDescriptor,
+  Query,
+  type QueryInstruction,
+} from "@reactive-dot/core";
+import type { Getter } from "jotai";
+import { useAtomCallback } from "jotai/utils";
+import { useCallback } from "react";
+
+/**
+ * Hook for loading queries without suspending.
+ *
+ * @returns The function to load queries
+ */
+export function useQueryLoader() {
+  const chainId = useChainId_INTERNAL();
+
+  const _loadQuery = useCallback(
+    (get: Getter) =>
+      <
+        TQuery extends (
+          builder: Query<[], TDescriptor>,
+        ) => Query<QueryInstruction<TDescriptor>[], TDescriptor>,
+        TDescriptor extends TChainId extends void
+          ? CommonDescriptor
+          : Chains[TChainId],
+        TChainId extends ChainId,
+      >(
+        builder: TQuery,
+        options?: ChainHookOptions<TChainId>,
+      ) => {
+        const query = builder(new Query([]));
+
+        void get(
+          queryPayloadAtomFamily({
+            chainId: options?.chainId ?? chainId,
+            query,
+          }),
+        );
+      },
+    [chainId],
+  );
+
+  const loadQuery = useAtomCallback(
+    useCallback(
+      (
+        get,
+        _,
+        builder: <TChainId extends ChainId>(
+          query: Query<[]>,
+          options?: ChainHookOptions<TChainId>,
+        ) => Query<[]>,
+      ) => _loadQuery(get)(builder),
+      [_loadQuery],
+    ),
+  );
+
+  return loadQuery as ReturnType<typeof _loadQuery>;
+}

packages/react/src/index.ts

@@ -20,6 +20,7 @@ export {
   useNativeTokenAmountFromPlanck,
 } from "./hooks/use-native-token-amount.js";
 export { useQueryErrorResetter } from "./hooks/use-query-error-resetter.js";
+export { useQueryLoader } from "./hooks/use-query-loader.js";
 export {
   useLazyLoadQuery,
   useLazyLoadQueryWithRefresh,

packages/react/src/stores/query.ts

@@ -13,7 +13,7 @@ import { atom, type Atom, type WritableAtom } from "jotai";
 import { atomFamily, atomWithObservable, atomWithRefresh } from "jotai/utils";
 import { from, switchMap, type Observable } from "rxjs";
 
-const instructionPayloadAtomFamily = atomFamily(
+export const instructionPayloadAtomFamily = atomFamily(
   (param: {
     chainId: ChainId;
     instruction: Exclude<