chore: add context helpers to the generated tanstack hooks (#767)

Author: ymc9

packages/plugins/tanstack-query/package.json

@@ -83,6 +83,7 @@
         "jest": "^29.5.0",
         "react": "18.2.0",
         "rimraf": "^3.0.2",
+        "svelte": "^4.2.1",
         "swr": "^2.0.3",
         "ts-jest": "^29.0.5",
         "typescript": "^4.9.4",

packages/plugins/tanstack-query/src/generator.ts

@@ -418,10 +418,14 @@ function generateIndex(project: Project, outDir: string, models: DataModel[], ta
             sf.addStatements(`export { Provider } from '@zenstackhq/tanstack-query/runtime/react';`);
             break;
         case 'vue':
-            sf.addStatements(`export { VueQueryContextKey } from '@zenstackhq/tanstack-query/runtime/vue';`);
+            sf.addStatements(
+                `export { VueQueryContextKey, provideHooksContext } from '@zenstackhq/tanstack-query/runtime/vue';`
+            );
             break;
         case 'svelte':
-            sf.addStatements(`export { SvelteQueryContextKey } from '@zenstackhq/tanstack-query/runtime/svelte';`);
+            sf.addStatements(
+                `export { SvelteQueryContextKey, setHooksContext } from '@zenstackhq/tanstack-query/runtime/svelte';`
+            );
             break;
     }
 }

packages/plugins/tanstack-query/src/runtime/common.ts

@@ -24,7 +24,7 @@ export type APIContext = {
     /**
      * The endpoint to use for the queries.
      */
-    endpoint: string;
+    endpoint?: string;
 
     /**
      * A custom fetch function for sending the HTTP requests.

packages/plugins/tanstack-query/src/runtime/index.ts

@@ -1 +1,2 @@
 export * from './prisma-types';
+export type { FetchFn } from './common';

packages/plugins/tanstack-query/src/runtime/svelte.ts

@@ -10,7 +10,8 @@ import {
     type QueryClient,
     type QueryOptions,
 } from '@tanstack/svelte-query';
-import { FetchFn, QUERY_KEY_PREFIX, fetcher, makeUrl, marshal } from './common';
+import { setContext } from 'svelte';
+import { APIContext, FetchFn, QUERY_KEY_PREFIX, fetcher, makeUrl, marshal } from './common';
 
 export { APIContext as RequestHandlerContext } from './common';
 
@@ -19,6 +20,13 @@ export { APIContext as RequestHandlerContext } from './common';
  */
 export const SvelteQueryContextKey = 'zenstack-svelte-query-context';
 
+/**
+ * Set context for the generated TanStack Query hooks.
+ */
+export function setHooksContext(context: APIContext) {
+    setContext(SvelteQueryContextKey, context);
+}
+
 /**
  * Creates a svelte-query query.
  *

packages/plugins/tanstack-query/src/runtime/vue.ts

@@ -11,16 +11,22 @@ import {
     type UseMutationOptions,
     type UseQueryOptions,
 } from '@tanstack/vue-query';
-import { inject } from 'vue';
-import { DEFAULT_QUERY_ENDPOINT, FetchFn, QUERY_KEY_PREFIX, fetcher, makeUrl, marshal } from './common';
-import { RequestHandlerContext } from './svelte';
+import { inject, provide } from 'vue';
+import { APIContext, DEFAULT_QUERY_ENDPOINT, FetchFn, QUERY_KEY_PREFIX, fetcher, makeUrl, marshal } from './common';
 
 export { APIContext as RequestHandlerContext } from './common';
 
 export const VueQueryContextKey = 'zenstack-vue-query-context';
 
+/**
+ * Provide context for the generated TanStack Query hooks.
+ */
+export function provideHooksContext(context: APIContext) {
+    provide<APIContext>(VueQueryContextKey, context);
+}
+
 export function getContext() {
-    return inject<RequestHandlerContext>(VueQueryContextKey, {
+    return inject<APIContext>(VueQueryContextKey, {
         endpoint: DEFAULT_QUERY_ENDPOINT,
         fetch: undefined,
     });