feat: add options for disabling data fetching in hooks

package.json

@@ -1,6 +1,6 @@
 {
     "name": "zenstack-monorepo",
-    "version": "0.3.7",
+    "version": "0.3.8",
     "description": "",
     "scripts": {
         "build": "pnpm -r build",

packages/internal/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenstackhq/internal",
-    "version": "0.3.7",
+    "version": "0.3.8",
     "displayName": "ZenStack Internal Library",
     "description": "ZenStack internal runtime library. This package is for supporting runtime functionality of ZenStack and not supposed to be used directly.",
     "repository": {

packages/internal/src/client.ts

@@ -1,3 +1,3 @@
-export { ServerErrorCode } from './types';
+export { ServerErrorCode, RequestOptions } from './types';
 export * as request from './request';
 export * from './validation';

packages/internal/src/request.ts

@@ -5,6 +5,7 @@ import type {
     MutatorOptions,
     SWRResponse,
 } from 'swr/dist/types';
+import { RequestOptions } from './types';
 
 type BufferShape = { type: 'Buffer'; data: number[] };
 function isBuffer(value: unknown): value is BufferShape {
@@ -101,9 +102,11 @@ function makeUrl(url: string, args: unknown) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function get<Data, Error = any>(
     url: string | null,
-    args?: unknown
+    args?: unknown,
+    options?: RequestOptions
 ): SWRResponse<Data, Error> {
-    return useSWR<Data, Error>(url && makeUrl(url, args), fetcher);
+    const reqUrl = options?.disabled ? null : url ? makeUrl(url, args) : null;
+    return useSWR<Data, Error>(reqUrl, fetcher);
 }
 
 export async function post<Data, Result>(

packages/internal/src/types.ts

@@ -213,3 +213,11 @@ export type LogEvent = {
     target?: string;
     message?: string;
 };
+
+/**
+ * Client request options
+ */
+export type RequestOptions = {
+    // disable data fetching
+    disabled: boolean;
+};

packages/runtime/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@zenstackhq/runtime",
     "displayName": "ZenStack Runtime Library",
-    "version": "0.3.7",
+    "version": "0.3.8",
     "description": "This package contains runtime library for consuming client and server side code generated by ZenStack.",
     "repository": {
         "type": "git",

packages/schema/package.json

@@ -3,7 +3,7 @@
     "publisher": "zenstack",
     "displayName": "ZenStack Language Tools",
     "description": "A toolkit for modeling data and access policies in full-stack development with Next.js and Typescript",
-    "version": "0.3.7",
+    "version": "0.3.8",
     "author": {
         "name": "ZenStack Team"
     },

packages/schema/src/generator/react-hooks/index.ts

@@ -5,7 +5,7 @@ import { paramCase } from 'change-case';
 import { DataModel } from '@lang/generated/ast';
 import colors from 'colors';
 import { extractDataModelsWithAllowRules } from '../ast-utils';
-import { API_ROUTE_NAME, INTERNAL_PACKAGE } from '../constants';
+import { API_ROUTE_NAME } from '../constants';
 
 /**
  * Generate react data query hooks code
@@ -51,8 +51,7 @@ export default class ReactHooksGenerator implements Generator {
             moduleSpecifier: '../../.prisma',
         });
         sf.addStatements([
-            `import { request, validate } from '${INTERNAL_PACKAGE}/lib/client';`,
-            `import { ServerErrorCode } from '@zenstackhq/runtime/client';`,
+            `import { request, validate, ServerErrorCode, RequestOptions } from '@zenstackhq/runtime/client';`,
             `import { type SWRResponse } from 'swr';`,
             `import { ${this.getValidator(
                 model,
@@ -119,11 +118,15 @@ export default class ReactHooksGenerator implements Generator {
                         name: 'args?',
                         type: `P.SelectSubset<T, P.${model.name}FindManyArgs>`,
                     },
+                    {
+                        name: 'options?',
+                        type: 'RequestOptions',
+                    },
                 ],
             })
             .addBody()
             .addStatements([
-                `return request.get<P.CheckSelect<T, Array<${model.name}>, Array<P.${model.name}GetPayload<T>>>>(endpoint, args);`,
+                `return request.get<P.CheckSelect<T, Array<${model.name}>, Array<P.${model.name}GetPayload<T>>>>(endpoint, args, options);`,
             ]);
 
         // get
@@ -141,11 +144,15 @@ export default class ReactHooksGenerator implements Generator {
                         name: 'args?',
                         type: `P.SelectSubset<T, P.Subset<P.${model.name}FindFirstArgs, 'select' | 'include'>>`,
                     },
+                    {
+                        name: 'options?',
+                        type: 'RequestOptions',
+                    },
                 ],
             })
             .addBody()
             .addStatements([
-                `return request.get<P.CheckSelect<T, ${model.name}, P.${model.name}GetPayload<T>>>(id ? \`\${endpoint}/\${id}\`: null, args);`,
+                `return request.get<P.CheckSelect<T, ${model.name}, P.${model.name}GetPayload<T>>>(id ? \`\${endpoint}/\${id}\`: null, args, options);`,
             ]);
 
         // update

samples/todo/components/BreadCrumb.tsx

@@ -1,15 +1,14 @@
+import { useCurrentSpace } from '@lib/context';
 import { useList } from '@zenstackhq/runtime/hooks';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useCurrentSpace } from '@lib/context';
 
 export default function BreadCrumb() {
     const router = useRouter();
     const space = useCurrentSpace();
     const { get: getList } = useList();
 
     const parts = router.asPath.split('/').filter((p) => p);
-
     const [base, slug, listId] = parts;
     if (base !== 'space') {
         return <></>;

samples/todo/components/ManageMembers.tsx

@@ -24,6 +24,9 @@ export default function ManageMembers({ space }: Props) {
         include: {
             user: true,
         },
+        orderBy: {
+            role: 'desc',
+        },
     });
 
     const inviteUser = async () => {

samples/todo/components/SpaceMembers.tsx

@@ -46,17 +46,20 @@ export default function SpaceMembers() {
     const space = useCurrentSpace();
 
     const { find: findMembers } = useSpaceUser();
-    const { data: members } = findMembers({
-        where: {
-            spaceId: space?.id,
+    const { data: members } = findMembers(
+        {
+            where: {
+                spaceId: space?.id,
+            },
+            include: {
+                user: true,
+            },
+            orderBy: {
+                role: 'desc',
+            },
         },
-        include: {
-            user: true,
-        },
-        orderBy: {
-            role: 'desc',
-        },
-    });
+        { disabled: !space }
+    );
 
     return (
         <div className="flex items-center">

samples/todo/lib/context.ts

@@ -17,15 +17,16 @@ export const SpaceContext = createContext<Space | undefined>(undefined);
 export function useCurrentSpace() {
     const router = useRouter();
     const { find } = useSpace();
-    const spaces = find({
-        where: {
-            slug: router.query.slug as string,
+    const spaces = find(
+        {
+            where: {
+                slug: router.query.slug as string,
+            },
         },
-    });
-
-    if (!router.query.slug) {
-        return undefined;
-    }
+        {
+            disabled: !router.query.slug,
+        }
+    );
 
     return spaces.data?.[0];
 }