doc: updates to sveltekit adapter and svelte-query integration docs (#543)

Author: ymc9

docs/reference/server-adapters/sveltekit.mdx

@@ -19,29 +19,68 @@ import AdapterOptions from './_options.mdx';
 
 ### Mounting the API
 
-You can mount the API by creating SvelteKit server hooks like:
+There are two ways to mount the ZenStack API in SvelteKit: as API routes or server hooks (deprecated).
+
+#### API Routes
+
+You can mount the services at specific path as [API routes](https://svelte.dev/tutorial/kit/get-handlers) like the following:
+
+```ts title='/src/routes/api/model/[...path]/+server.ts'
+import { SvelteKitRouteHandler } from "@zenstackhq/server/sveltekit";
+import { RPCApiHandler } from '@zenstackhq/server/api';
+import { getSessionUser } from '~/auth';
+import { db } from '~/db';
+import { schema } from '~/zenstack/schema';
+
+const handler = SvelteKitRouteHandler({
+  apiHandler: new RPCApiHandler({ schema }),
+  // getSessionUser extracts the current session user from the request, its
+  // implementation depends on your auth solution
+  getClient: (event) => db.$setAuth(getSessionUser(event)),
+});
+
+export const GET = handler;
+export const POST = handler;
+export const PUT = handler;
+export const DELETE = handler;
+export const PATCH = handler;
+```
+
+Please note that the wildcard route parameter must be named `path` as expected by the adapter implementation.
+
+The API router handler takes the following options to initialize:
+
+<AdapterOptions getClient='(event: RequestEvent) => ClientContract<Schema> | Promise<ClientContract<Schema>>' />
+
+#### Server Hooks
+
+:::warning
+The server hooks method is deprecated and will be removed in a future release. Use API routes instead.
+:::
+
+You can mount the API by creating SvelteKit [server hooks](https://svelte.dev/tutorial/kit/handle) like:
 
 ```ts title='/src/hooks.server.ts'
 import { SvelteKitHandler } from '@zenstackhq/server/sveltekit';
 import { RPCApiHandler } from '@zenstackhq/server/api';
 import { getSessionUser } from '~/auth';
-import { client } from '~/db';
+import { db } from '~/db';
 import { schema } from '~/zenstack/schema';
 
 export const handle = SvelteKitHandler({
     apiHandler: new RPCApiHandler({ schema }),
     prefix: '/api/model',
     // getSessionUser extracts the current session user from the request, its
     // implementation depends on your auth solution
-    getClient: (event) => client.$setAuth(getSessionUser(event)),
+    getClient: (event) => db.$setAuth(getSessionUser(event)),
 });
 ```
 
 :::tip
 You can use the [sequence helper](https://svelte.dev/docs/kit/@sveltejs-kit-hooks#sequence) to compose multiple server hooks.
 :::
 
-The SvelteKit hooks handler takes the following options to initialize:
+The hooks handler takes the following options to initialize:
 
 - prefix
 

docs/service/client-sdk/tanstack-query/index.md

@@ -10,6 +10,7 @@ import OptimisticBehavior from './_optimistic-behavior.md';
 import OptimisticLimitation from './_optimistic-limitation.md';
 import FineGrainedOptimistic from './_fine-grained-optimistic.md';
 import Invalidation from './_invalidation.md';
+import PreviewFeature from '../../../_components/PreviewFeature.tsx'
 
 # TanStack Query
 
@@ -50,6 +51,8 @@ The integration provides the following features
 - `@tanstack/svelte-query`: v6+
 - `svelte` v5.25.0+
 
+<PreviewFeature name="Svelte support" />
+
 :::warning
 
 `@tanstack/svelte-query` v6 leverages Svelte 5's [runes](https://svelte.dev/docs/svelte/what-are-runes) reactivity system. ZenStack is not compatible with prior versions that use Svelte stores.