Basic WIP of useLazyQuery

examples/react/src/features/posts/PostsManager.tsx

@@ -56,19 +56,29 @@ const PostListItem = ({ data: { name, id }, onSelect }: { data: Post; onSelect:
 };
 
 const PostList = () => {
-  const { data: posts, isLoading } = useGetPostsQuery();
+  // const { data: posts, isLoading } = useGetPostsQuery();
+  const [getPosts, { data: posts, isLoading, isFetching }] = postApi.endpoints['getPosts'].useLazyQuery();
+
   const { push } = useHistory();
 
   if (isLoading) {
     return <div>Loading</div>;
   }
 
   if (!posts) {
-    return <div>No posts :(</div>;
+    return (
+      <div>
+        No posts :({' '}
+        <button onClick={getPosts} disabled={isFetching}>
+          {isFetching ? 'Fetching...' : 'Fetch them'}
+        </button>
+      </div>
+    );
   }
 
   return (
     <div>
+      <button onClick={getPosts}> {isFetching ? 'Fetching...' : 'Refetch posts'}</button>
       {posts.map((post) => (
         <PostListItem key={post.id} data={post} onSelect={(id) => push(`/posts/${id}`)} />
       ))}

examples/react/src/mocks/handlers.ts

@@ -58,7 +58,7 @@ export const handlers = [
   }),
 
   rest.get('/posts', (req, res, ctx) => {
-    return res(ctx.json(Object.values(state.entities)));
+    return res(ctx.delay(300), ctx.json(Object.values(state.entities)));
   }),
 
   rest.post('/posts', (req, res, ctx) => {

package.json

@@ -160,6 +160,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "shelljs": "^0.8.4",
     "size-limit": "^4.6.0",
+    "ts-jest": "^26.5.4",
     "ts-node": "^9.0.0",
     "ts-unused-exports": "^7.0.0",
     "tsdx": "^0.14.1",

src/react-hooks/buildHooks.ts

@@ -27,6 +27,7 @@ import { useShallowStableValue } from './useShallowStableValue';
 
 export interface QueryHooks<Definition extends QueryDefinition<any, any, any, any, any>> {
   useQuery: UseQuery<Definition>;
+  useLazyQuery: UseLazyQuery<Definition>;
   useQuerySubscription: UseQuerySubscription<Definition>;
   useQueryState: UseQueryState<Definition>;
 }
@@ -40,6 +41,11 @@ export type UseQuery<D extends QueryDefinition<any, any, any, any>> = <R = UseQu
   options?: UseQuerySubscriptionOptions & UseQueryStateOptions<D, R>
 ) => UseQueryStateResult<D, R> & ReturnType<UseQuerySubscription<D>>;
 
+export type UseLazyQuery<D extends QueryDefinition<any, any, any, any>> = <R = UseQueryStateDefaultResult<D>>(
+  arg: QueryArgFrom<D>,
+  options?: UseQuerySubscriptionOptions & UseQueryStateOptions<D, R>
+) => [() => void, UseQueryStateResult<D, R> & ReturnType<UseQuerySubscription<D>>];
+
 interface UseQuerySubscriptionOptions extends SubscriptionOptions {
   skip?: boolean;
   refetchOnMountOrArgChange?: boolean | number;
@@ -262,6 +268,23 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
     return {
       useQueryState,
       useQuerySubscription,
+      useLazyQuery(arg, options) {
+        const queryStateResults = useQueryState(arg, options);
+        const [isTriggered, setTriggered] = useState((queryStateResults as any).isSuccess);
+        const { refetch, ...querySubscriptionResults } = useQuerySubscription(arg, {
+          ...options,
+          ...(isTriggered ? {} : { skip: !isTriggered }),
+        });
+
+        const triggerQuery = useCallback(() => (!isTriggered ? setTriggered(true) : refetch()), [refetch, isTriggered]);
+
+        return useMemo(() => [triggerQuery, { refetch, ...queryStateResults, ...querySubscriptionResults }], [
+          queryStateResults,
+          querySubscriptionResults,
+          refetch,
+          triggerQuery,
+        ]);
+      },
       useQuery(arg, options) {
         const querySubscriptionResults = useQuerySubscription(arg, options);
         const queryStateResults = useQueryState(arg, options);

src/react-hooks/module.ts

@@ -70,13 +70,15 @@ export const reactHooksModule = ({
       injectEndpoint(endpointName, definition) {
         const anyApi = (api as any) as Api<any, Record<string, any>, string, string, ReactHooksModule>;
         if (isQueryDefinition(definition)) {
-          const { useQuery, useQueryState, useQuerySubscription } = buildQueryHooks(endpointName);
+          const { useQuery, useLazyQuery, useQueryState, useQuerySubscription } = buildQueryHooks(endpointName);
           safeAssign(anyApi.endpoints[endpointName], {
             useQuery,
+            useLazyQuery,
             useQueryState,
             useQuerySubscription,
           });
           (api as any)[`use${capitalize(endpointName)}Query`] = useQuery;
+          (api as any)[`useLazy${capitalize(endpointName)}Query`] = useLazyQuery;
         } else if (isMutationDefinition(definition)) {
           const useMutation = buildMutationHook(endpointName);
           safeAssign(anyApi.endpoints[endpointName], {