refactor: rename useQuery to useLazyLoadQuery

- To explicitly convey that the hook will load the query after render and can cause waterfall
- In preparation for React 19 with different possible preloading strategies

apps/docs/docs/getting-started/query.md

@@ -4,15 +4,15 @@ sidebar_position: 2
 
 # Query
 
-The [`useQuery`](/api/react/function/useQuery) hook allow you to read any data from chain, while maintaining updates, concurrency, caching & deduplication behind the scene for you.
+The [`useLazyLoadQuery`](/api/react/function/useLazyLoadQuery) hook allow you to read any data from chain, while maintaining updates, concurrency, caching & deduplication behind the scene for you.
 
 ## Async handling
 
-[`useQuery`](/api/react/function/useQuery) utilize React's Suspense API for data fetching & error handling.
+[`useLazyLoadQuery`](/api/react/function/useLazyLoadQuery) utilize React's Suspense API for data fetching & error handling.
 
 ```tsx
 const ActiveEra = () => {
-  const activeEra = useQuery((builder) =>
+  const activeEra = useLazyLoadQuery((builder) =>
     builder.readStorage("Staking", "ActiveEra", []),
   );
 
@@ -32,11 +32,11 @@ const App = () => {
 
 ## Fetching multiple data
 
-Fetching multiple data can be done by chaining queries together, [`useQuery`](/api/react/function/useQuery) (with TypeScript) will automatically infer that you want to fetch multiple data concurrently & will return an array of data instead.
+Fetching multiple data can be done by chaining queries together, [`useLazyLoadQuery`](/api/react/function/useLazyLoadQuery) (with TypeScript) will automatically infer that you want to fetch multiple data concurrently & will return an array of data instead.
 
 ```tsx
 const MultiQuery = () => {
-  const [expectedBlockTime, epochDuration, proposalCount] = useQuery(
+  const [expectedBlockTime, epochDuration, proposalCount] = useLazyLoadQuery(
     (builder) =>
       builder
         .fetchConstant("Babe", "ExpectedBlockTime")
@@ -62,7 +62,7 @@ const MultiQuery = () => {
 Multiple queries of the same type can also be fetched using [`callApis`](/api/core/class/Query#callApis) & [`readStorages`](/api/core/class/Query#readStorages).
 
 ```tsx
-const [rewards, metadatum] = useQuery((builder) =>
+const [rewards, metadatum] = useLazyLoadQuery((builder) =>
   builder
     .callApis("NominationPoolsApi", "pending_rewards", [
       [ADDRESS_1],
@@ -83,11 +83,11 @@ Result of a query can be used as variables in subsequent queries.
 
 ```tsx
 const Query = () => {
-  const pools = useQuery((builder) =>
+  const pools = useLazyLoadQuery((builder) =>
     builder.readStorageEntries("NominationPools", "BondedPools", []),
   );
 
-  const poolMetadatum = useQuery((builder) =>
+  const poolMetadatum = useLazyLoadQuery((builder) =>
     builder.readStorages(
       "NominationPools",
       "Metadata",
@@ -113,7 +113,7 @@ const Query = () => {
 Use a falsy value (`undefined`, `null` or `false`) to conditionally fetch data. If the query builder returns or itself is a falsy value, Reactive DOT will not execute the query.
 
 ```ts
-const conditionalReturn = useQuery((builder) =>
+const conditionalReturn = useLazyLoadQuery((builder) =>
   account === undefined
     ? undefined
     : builder.callApi("NominationPoolsApi", "pending_rewards", [
@@ -123,7 +123,7 @@ const conditionalReturn = useQuery((builder) =>
 
 // Or
 
-const conditionalFunction = useQuery(
+const conditionalFunction = useLazyLoadQuery(
   account === undefined
     ? undefined
     : (builder) =>
@@ -135,14 +135,14 @@ const conditionalFunction = useQuery(
 
 ## Refreshing queries
 
-Certain query, like runtime API calls & reading of storage entries doesn't create any subscriptions. In order to get the latest data, they must be manually refreshed with the [`useQueryWithRefresh`](/api/react/function/useQueryWithRefresh) hook.
+Certain query, like runtime API calls & reading of storage entries doesn't create any subscriptions. In order to get the latest data, they must be manually refreshed with the [`useLazyLoadQueryWithRefresh`](/api/react/function/useLazyLoadQueryWithRefresh) hook.
 
 ```tsx
 import { useTransition } from "react";
 
 const QueryWithRefresh = () => {
   const [isPending, startTransition] = useTransition();
-  const [pendingRewards, refreshPendingRewards] = useQueryWithRefresh(
+  const [pendingRewards, refreshPendingRewards] = useLazyLoadQueryWithRefresh(
     (builder) =>
       builder.callApi("NominationPoolsApi", "pending_rewards", [
         ACCOUNT_ADDRESS,
@@ -168,7 +168,7 @@ The above will refresh all refreshable data in the query. If you want to target
 ```tsx
 const QueryWithRefresh = () => {
   const [isPending, startTransition] = useTransition();
-  const [account1Rewards, account2Rewards] = useQuery((builder) =>
+  const [account1Rewards, account2Rewards] = useLazyLoadQuery((builder) =>
     builder
       .callApi("NominationPoolsApi", "pending_rewards", [ACCOUNT_ADDRESS_1])
       .callApi("NominationPoolsApi", "pending_rewards", [ACCOUNT_ADDRESS_2]),

apps/docs/docs/getting-started/setup.mdx

@@ -119,11 +119,11 @@ export default App;
 
 ```tsx title="MyComponent.tsx"
 import { config } from "./config";
-import { useQuery, useAccounts } from "@reactive-dot/react";
+import { useAccounts, useLazyLoadQuery } from "@reactive-dot/react";
 
 const MyComponent = () => {
   const accounts = useAccounts();
-  const [timestamp, totalIssuance] = useQuery((builder) =>
+  const [timestamp, totalIssuance] = useLazyLoadQuery((builder) =>
     builder
       .readStorage("Timestamp", "Now", [])
       .readStorage("Balances", "TotalIssuance", []),

apps/example/src/App.tsx

@@ -11,8 +11,8 @@ import {
   useConnectedWallets,
   useDisconnectWallet,
   useMutation,
-  useQuery,
-  useQueryWithRefresh,
+  useLazyLoadQuery,
+  useLazyLoadQueryWithRefresh,
   useResetQueryError,
   useWallets,
 } from "@reactive-dot/react";
@@ -43,7 +43,7 @@ const PendingPoolRewards = () => {
   const accounts = useAccounts();
 
   const [isPending, startTransition] = useTransition();
-  const [pendingRewards, refreshPendingRewards] = useQueryWithRefresh(
+  const [pendingRewards, refreshPendingRewards] = useLazyLoadQueryWithRefresh(
     (builder) =>
       builder.callApis(
         "NominationPoolsApi",
@@ -93,7 +93,7 @@ const Query = () => {
     activeEra,
     totalValueLocked,
     poolMetadatum,
-  ] = useQuery((builder) =>
+  ] = useLazyLoadQuery((builder) =>
     builder
       .fetchConstant("Babe", "ExpectedBlockTime")
       .fetchConstant("Babe", "EpochDuration")
@@ -112,7 +112,7 @@ const Query = () => {
     sessionsPerEra *
     bondingDuration;
 
-  const totalStaked = useQuery((builder) =>
+  const totalStaked = useLazyLoadQuery((builder) =>
     activeEra === undefined
       ? undefined
       : builder.readStorage("Staking", "ErasTotalStake", [activeEra.index]),

packages/react/src/hooks/useQuery.ts

@@ -82,7 +82,7 @@ export const useRefreshQuery = <
  * @param options - Additional options
  * @returns The data response & a function to refresh it
  */
-export const useQueryWithRefresh = <
+export const useLazyLoadQueryWithRefresh = <
   TQuery extends
     | ((
         builder: Query<[], TDescriptor>,
@@ -159,7 +159,7 @@ export const useQueryWithRefresh = <
  * @param options - Additional options
  * @returns The data response
  */
-export const useQuery = <
+export const useLazyLoadQuery = <
   TQuery extends
     | ((
         builder: Query<[], TDescriptor>,
@@ -180,7 +180,7 @@ export const useQuery = <
         InferQueryPayload<Exclude<ReturnType<Exclude<TQuery, Falsy>>, Falsy>>
       >
     > => {
-  const [data] = useQueryWithRefresh(builder, options);
+  const [data] = useLazyLoadQueryWithRefresh(builder, options);
 
   return data;
 };

packages/react/src/index.ts

@@ -15,8 +15,8 @@ export { useConnectWallet } from "./hooks/useConnectWallet.js";
 export { useDisconnectWallet } from "./hooks/useDisconnectWallet.js";
 export { useMutation } from "./hooks/useMutation.js";
 export {
-  useQuery,
-  useQueryWithRefresh,
+  useLazyLoadQuery,
+  useLazyLoadQueryWithRefresh,
   useRefreshQuery,
 } from "./hooks/useQuery.js";
 export { useReconnectWallets } from "./hooks/useReconnectWallets.js";