feat(tanstack-query): new implementation of tanstack-query react hooks (#356)

* WIP

* feat: tanstack-query/react CRUD hooks implementation

* fix build

* addressing PR comments

* update

* update

* migrate tests

* update

* fix test environment

* use happy-dom instead of jsdom

Author: ymc9

README.md

@@ -51,7 +51,8 @@ Even without using advanced features, ZenStack offers the following benefits as
 
 # Quick start
 
-> You can also check the [blog sample](./samples/blog) for a complete example.
+- [ORM](./samples/orm): A simple example demonstrating ZenStack ORM usage.
+- [Next.js + TanStack Query](./samples/next.js): A full-stack sample demonstrating using TanStack Query to consume ZenStack's automatic CRUD services in a Next.js app.
 
 ## Installation
 

package.json

@@ -31,7 +31,8 @@
         "typescript": "catalog:",
         "typescript-eslint": "^8.34.1",
         "vitest": "^3.2.4",
-        "yaml": "^2.8.0"
+        "yaml": "^2.8.0",
+        "prisma": "catalog:"
     },
     "pnpm": {
         "onlyBuiltDependencies": [

packages/cli/package.json

@@ -45,7 +45,7 @@
         "prisma": "catalog:"
     },
     "devDependencies": {
-        "@types/better-sqlite3": "^7.6.13",
+        "@types/better-sqlite3": "catalog:",
         "@types/semver": "^7.7.0",
         "@types/tmp": "catalog:",
         "@zenstackhq/eslint-config": "workspace:*",

packages/tanstack-query/eslint.config.js renamed to packages/clients/tanstack-query/eslint.config.js

@@ -0,0 +1,70 @@
+{
+    "name": "@zenstackhq/tanstack-query",
+    "version": "3.0.0-beta.15",
+    "description": "TanStack Query Client for consuming ZenStack v3's CRUD service",
+    "main": "index.js",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "build": "tsc --noEmit && tsup-node",
+        "watch": "tsup-node --watch",
+        "lint": "eslint src --ext ts",
+        "test": "vitest run",
+        "pack": "pnpm pack",
+        "test:generate": "tsx scripts/generate.ts"
+    },
+    "keywords": [
+        "tanstack-query",
+        "react-query",
+        "zenstack",
+        "orm",
+        "fullstack"
+    ],
+    "author": "ZenStack Team",
+    "license": "MIT",
+    "exports": {
+        "./react": {
+            "import": {
+                "types": "./dist/react.d.ts",
+                "default": "./dist/react.js"
+            },
+            "require": {
+                "types": "./dist/react.d.cts",
+                "default": "./dist/react.cjs"
+            }
+        }
+    },
+    "dependencies": {
+        "@zenstackhq/common-helpers": "workspace:*",
+        "@zenstackhq/orm": "workspace:*",
+        "@zenstackhq/schema": "workspace:*",
+        "decimal.js": "catalog:",
+        "superjson": "^2.2.3"
+    },
+    "devDependencies": {
+        "@tanstack/react-query": "catalog:",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.0",
+        "@types/react": "catalog:",
+        "@zenstackhq/eslint-config": "workspace:*",
+        "@zenstackhq/language": "workspace:*",
+        "@zenstackhq/sdk": "workspace:*",
+        "@zenstackhq/typescript-config": "workspace:*",
+        "@zenstackhq/vitest-config": "workspace:*",
+        "happy-dom": "^20.0.10",
+        "nock": "^14.0.10",
+        "react": "catalog:"
+    },
+    "peerDependencies": {
+        "@tanstack/react-query": "^5.0.0",
+        "react": "^18 || ^19"
+    },
+    "peerDependenciesMeta": {
+        "@tanstack/react-query": {
+            "optional": true
+        },
+        "react": {
+            "optional": true
+        }
+    }
+}

packages/clients/tanstack-query/package.json

@@ -0,0 +1,27 @@
+import { loadDocument } from '@zenstackhq/language';
+import { TsSchemaGenerator } from '@zenstackhq/sdk';
+import { glob } from 'glob';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const dir = path.dirname(fileURLToPath(import.meta.url));
+
+async function main() {
+    const zmodelFiles = glob.sync(path.resolve(dir, '../test/**/*.zmodel'));
+    for (const file of zmodelFiles) {
+        console.log(`Generating TS schema for: ${file}`);
+        await generate(file);
+    }
+}
+
+async function generate(schemaPath: string) {
+    const generator = new TsSchemaGenerator();
+    const outputDir = path.dirname(schemaPath);
+    const result = await loadDocument(schemaPath);
+    if (!result.success) {
+        throw new Error(`Failed to load schema from ${schemaPath}: ${result.errors}`);
+    }
+    await generator.generate(result.model, outputDir);
+}
+
+main();