@checkstack/frontend-api 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,80 @@
 # @checkstack/frontend-api
 
+## 0.3.0
+
+### Minor Changes
+
+- 4eed42d: Fix "No QueryClient set" error in containerized builds
+
+  **Problem**: The containerized application was throwing "No QueryClient set, use QueryClientProvider to set one" errors during plugin registration. This didn't happen in dev mode.
+
+  **Root Cause**: The `@tanstack/react-query` package was being bundled separately in different workspace packages, causing multiple React Query contexts. The `QueryClientProvider` from the main app wasn't visible to plugin code due to this module duplication.
+
+  **Changes**:
+
+  - `@checkstack/frontend-api`: Export `useQueryClient` from the centralized React Query import, ensuring all packages use the same context
+  - `@checkstack/dashboard-frontend`: Import `useQueryClient` from `@checkstack/frontend-api` instead of directly from `@tanstack/react-query`, and remove the direct dependency
+  - `@checkstack/frontend`: Add `@tanstack/react-query` to Vite's `resolve.dedupe` as a safety net
+
+## 0.2.0
+
+### Minor Changes
+
+- 7a23261: ## TanStack Query Integration
+
+  Migrated all frontend components to use `usePluginClient` hook with TanStack Query integration, replacing the legacy `forPlugin()` pattern.
+
+  ### New Features
+
+  - **`usePluginClient` hook**: Provides type-safe access to plugin APIs with `.useQuery()` and `.useMutation()` methods
+  - **Automatic request deduplication**: Multiple components requesting the same data share a single network request
+  - **Built-in caching**: Configurable stale time and cache duration per query
+  - **Loading/error states**: TanStack Query provides `isLoading`, `error`, `isRefetching` states automatically
+  - **Background refetching**: Stale data is automatically refreshed when components mount
+
+  ### Contract Changes
+
+  All RPC contracts now require `operationType: "query"` or `operationType: "mutation"` metadata:
+
+  ```typescript
+  const getItems = proc()
+    .meta({ operationType: "query", access: [access.read] })
+    .output(z.array(itemSchema))
+    .query();
+
+  const createItem = proc()
+    .meta({ operationType: "mutation", access: [access.manage] })
+    .input(createItemSchema)
+    .output(itemSchema)
+    .mutation();
+  ```
+
+  ### Migration
+
+  ```typescript
+  // Before (forPlugin pattern)
+  const api = useApi(myPluginApiRef);
+  const [items, setItems] = useState<Item[]>([]);
+  useEffect(() => {
+    api.getItems().then(setItems);
+  }, [api]);
+
+  // After (usePluginClient pattern)
+  const client = usePluginClient(MyPluginApi);
+  const { data: items, isLoading } = client.getItems.useQuery({});
+  ```
+
+  ### Bug Fixes
+
+  - Fixed `rpc.test.ts` test setup for middleware type inference
+  - Fixed `SearchDialog` to use `setQuery` instead of deprecated `search` method
+  - Fixed null→undefined warnings in notification and queue frontends
+
+### Patch Changes
+
+- Updated dependencies [7a23261]
+  - @checkstack/common@0.3.0
+
 ## 0.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/frontend-api",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "./src/index.ts",
   "scripts": {
@@ -13,7 +13,10 @@
   },
   "dependencies": {
     "@checkstack/common": "workspace:*",
-    "@orpc/client": "^1.13.2"
+    "@orpc/client": "^1.13.2",
+    "@orpc/react-query": "1.13.4",
+    "@orpc/tanstack-query": "^1.13.2",
+    "@tanstack/react-query": "^5.64.0"
   },
   "devDependencies": {
     "@types/bun": "^1.3.5",

package/src/index.ts

@@ -8,3 +8,4 @@ export * from "./utils";
 export * from "./slots";
 export * from "./use-plugin-route";
 export * from "./runtime-config";
+export * from "./orpc-query";

package/src/orpc-query.tsx

@@ -0,0 +1,345 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import {
+  createRouterUtils,
+  type RouterUtils,
+  type ProcedureUtils,
+} from "@orpc/react-query";
+import type { NestedClient, ClientContext } from "@orpc/client";
+import {
+  useQuery,
+  useMutation,
+  type UseQueryResult,
+  type UseMutationResult,
+  type UseQueryOptions,
+  type UseMutationOptions,
+} from "@tanstack/react-query";
+
+// Re-export useQueryClient for cache invalidation in consuming packages
+// This ensures all packages use the same React Query instance
+export { useQueryClient } from "@tanstack/react-query";
+import { useApi } from "./api-context";
+import { rpcApiRef } from "./core-apis";
+import type { ClientDefinition, InferClient } from "@checkstack/common";
+import type { ContractProcedure, AnyContractRouter } from "@orpc/contract";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+type OrpcUtils = RouterUtils<NestedClient<ClientContext>>;
+
+// =============================================================================
+// CONTEXT
+// =============================================================================
+
+const OrpcQueryContext = createContext<OrpcUtils | undefined>(undefined);
+
+// =============================================================================
+// PROVIDER
+// =============================================================================
+
+interface OrpcQueryProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provides oRPC React Query utilities to the application.
+ * Must be inside ApiProvider and QueryClientProvider.
+ */
+export const OrpcQueryProvider: React.FC<OrpcQueryProviderProps> = ({
+  children,
+}) => {
+  const rpcApi = useApi(rpcApiRef);
+
+  const orpcUtils = useMemo(() => {
+    return createRouterUtils(rpcApi.client as NestedClient<ClientContext>);
+  }, [rpcApi.client]);
+
+  return (
+    <OrpcQueryContext.Provider value={orpcUtils}>
+      {children}
+    </OrpcQueryContext.Provider>
+  );
+};
+
+// =============================================================================
+// INTERNAL
+// =============================================================================
+
+function useOrpcUtils(): OrpcUtils {
+  const context = useContext(OrpcQueryContext);
+  if (!context) {
+    throw new Error(
+      "usePluginClient must be used within OrpcQueryProvider. " +
+        "Wrap your app with <OrpcQueryProvider>."
+    );
+  }
+  return context;
+}
+
+// =============================================================================
+// TYPE HELPERS FOR STRICT operationType INFERENCE
+// =============================================================================
+
+/**
+ * Query procedure hook interface - only exposes useQuery.
+ * Input is optional when the procedure has no input schema.
+ */
+interface QueryProcedure<TInput, TOutput> {
+  useQuery: (
+    input?: TInput,
+    options?: Omit<UseQueryOptions<TOutput, Error>, "queryKey" | "queryFn">
+  ) => UseQueryResult<TOutput, Error>;
+}
+
+/**
+ * Mutation procedure hook interface - only exposes useMutation.
+ * Mutations don't take input directly - it's passed to mutate/mutateAsync.
+ */
+interface MutationProcedure<TInput, TOutput> {
+  useMutation: (
+    options?: Omit<
+      UseMutationOptions<TOutput, Error, TInput>,
+      "mutationFn" | "mutationKey"
+    >
+  ) => UseMutationResult<TOutput, Error, TInput>;
+}
+
+/**
+ * Maps a contract procedure to the appropriate hook type based on operationType.
+ * Extracts input/output types from ContractProcedure's schema types.
+ */
+type WrappedProcedure<TContractProcedure, _TClientProcedure> =
+  TContractProcedure extends ContractProcedure<
+    infer TInputSchema,
+    infer TOutputSchema,
+    infer _TErrors,
+    infer TMeta
+  >
+    ? TMeta extends { operationType: "mutation" }
+      ? MutationProcedure<
+          InferSchemaInputType<TInputSchema>,
+          InferSchemaOutputType<TOutputSchema>
+        >
+      : QueryProcedure<
+          InferSchemaInputType<TInputSchema>,
+          InferSchemaOutputType<TOutputSchema>
+        >
+    : never;
+
+/**
+ * Extract input type from Zod schema.
+ * Zod schemas have { _input: T } for input inference.
+ * Returns empty object when no input schema is defined (unknown input),
+ * allowing useQuery({}) calls for parameterless procedures.
+ */
+type InferSchemaInputType<T> = T extends { _input: infer I }
+  ? unknown extends I
+    ? Record<string, never>
+    : I
+  : Record<string, never>;
+
+/**
+ * Extract output type from Zod schema.
+ * Zod schemas have { _output: T } for output inference.
+ */
+type InferSchemaOutputType<T> = T extends { _output: infer O } ? O : unknown;
+
+/**
+ * Check if a contract type is a procedure (not a nested router).
+ */
+type IsContractProcedure<T> = T extends ContractProcedure<
+  infer _TInput,
+  infer _TOutput,
+  infer _TErrors,
+  infer _TMeta
+>
+  ? true
+  : false;
+
+/**
+ * Maps a contract router to wrapped procedures based on operationType.
+ * Recursively handles nested routers.
+ */
+type WrappedClient<TContract extends AnyContractRouter, TClient> = {
+  [K in keyof TClient & keyof TContract]: IsContractProcedure<
+    TContract[K]
+  > extends true
+    ? WrappedProcedure<TContract[K], TClient[K]>
+    : TClient[K] extends object
+    ? TContract[K] extends AnyContractRouter
+      ? WrappedClient<TContract[K], TClient[K]>
+      : never
+    : never;
+};
+
+// =============================================================================
+// HOOK: usePluginClient
+// =============================================================================
+
+/**
+ * Access a plugin's RPC client with TanStack Query integration.
+ *
+ * Each procedure exposes only the appropriate hook based on its operationType:
+ * - `operationType: "query"` → `.useQuery(input, options)`
+ * - `operationType: "mutation"` → `.useMutation(options)`
+ *
+ * @example
+ * ```tsx
+ * const catalog = usePluginClient(CatalogApi);
+ *
+ * // Queries (only useQuery available)
+ * const { data, isLoading } = catalog.getEntities.useQuery({});
+ *
+ * // Mutations (only useMutation available)
+ * const deleteMutation = catalog.deleteSystem.useMutation({
+ *   onSuccess: () => toast.success("Deleted!"),
+ * });
+ *
+ * const handleDelete = () => {
+ *   deleteMutation.mutate({ systemId });
+ * };
+ * ```
+ */
+export function usePluginClient<T extends ClientDefinition>(
+  definition: T
+): WrappedClient<NonNullable<T["__contractType"]>, InferClient<T>> {
+  const orpcUtils = useOrpcUtils();
+
+  const pluginUtils = (orpcUtils as Record<string, unknown>)[
+    definition.pluginId
+  ] as Record<string, unknown> | undefined;
+
+  if (!pluginUtils) {
+    throw new Error(
+      `Plugin "${definition.pluginId}" not found. ` +
+        `Ensure the plugin is registered and the backend is running.`
+    );
+  }
+
+  // Get contract for operationType checking
+  const contract = definition.contract as Record<string, unknown>;
+
+  return useMemo(() => {
+    return wrapPluginUtils(pluginUtils, contract);
+  }, [pluginUtils, contract]) as WrappedClient<
+    NonNullable<T["__contractType"]>,
+    InferClient<T>
+  >;
+}
+
+// =============================================================================
+// WRAPPER IMPLEMENTATION
+// =============================================================================
+
+function wrapPluginUtils(
+  utils: Record<string, unknown>,
+  contract: Record<string, unknown>
+): Record<string, unknown> {
+  const wrapped: Record<string, unknown> = {};
+
+  // Iterate over CONTRACT keys (procedure names like "getTheme", "getSystems")
+  // not the internal oRPC utility methods ("key", "call", "queryOptions" etc.)
+  for (const key of Object.keys(contract)) {
+    // Skip oRPC internal metadata keys
+    if (key.startsWith("~")) continue;
+
+    const procedureUtils = utils[key] as
+      | ProcedureUtils<ClientContext, unknown, unknown, Error>
+      | Record<string, unknown>
+      | undefined;
+
+    const contractProcedure = contract[key] as
+      | Record<string, unknown>
+      | undefined;
+
+    if (!procedureUtils || typeof procedureUtils !== "object") {
+      // Procedure might not be available in utils
+      continue;
+    }
+
+    // Check if this is a procedure (has queryOptions or mutationOptions method)
+    if (
+      typeof (
+        procedureUtils as ProcedureUtils<ClientContext, unknown, unknown, Error>
+      ).queryOptions === "function" ||
+      typeof (
+        procedureUtils as ProcedureUtils<ClientContext, unknown, unknown, Error>
+      ).mutationOptions === "function"
+    ) {
+      // Get operationType from contract metadata
+      const operationType = getOperationType(contractProcedure, key);
+      wrapped[key] = createProcedureHook(
+        procedureUtils as ProcedureUtils<
+          ClientContext,
+          unknown,
+          unknown,
+          Error
+        >,
+        operationType
+      );
+    } else {
+      // Nested namespace - recurse
+      wrapped[key] = wrapPluginUtils(
+        procedureUtils as Record<string, unknown>,
+        (contractProcedure || {}) as Record<string, unknown>
+      );
+    }
+  }
+
+  return wrapped;
+}
+
+/**
+ * Extract operationType from contract procedure metadata.
+ * Throws if operationType is not defined (required in all contracts).
+ */
+function getOperationType(
+  contractProcedure: Record<string, unknown> | undefined,
+  procedureName?: string
+): "query" | "mutation" {
+  const orpcMeta = contractProcedure?.["~orpc"] as
+    | { meta?: { operationType?: "query" | "mutation" } }
+    | undefined;
+
+  const operationType = orpcMeta?.meta?.operationType;
+
+  if (!operationType) {
+    throw new Error(
+      `Procedure ${
+        procedureName ? `"${procedureName}" ` : ""
+      }is missing required "operationType" in contract metadata. ` +
+        `Add operationType: "query" or operationType: "mutation" to the procedure's .meta() call.`
+    );
+  }
+
+  return operationType;
+}
+
+/**
+ * Creates the appropriate hook wrapper based on operationType.
+ */
+function createProcedureHook<TInput, TOutput>(
+  proc: ProcedureUtils<ClientContext, TInput, TOutput, Error>,
+  operationType: "query" | "mutation"
+): QueryProcedure<TInput, TOutput> | MutationProcedure<TInput, TOutput> {
+  if (operationType === "mutation") {
+    return {
+      useMutation: (options) => {
+        const mutationOpts = proc.mutationOptions(options);
+        return useMutation(mutationOpts);
+      },
+    };
+  }
+
+  return {
+    useQuery: (input, options) => {
+      // Get base query options from oRPC
+      const queryOpts = proc.queryOptions({
+        input: input as TInput,
+      });
+      // Spread caller options AFTER to ensure they take precedence (e.g., enabled: false)
+      return useQuery({ ...queryOpts, ...options });
+    },
+  };
+}

package/src/runtime-config.tsx

@@ -15,6 +15,18 @@ interface RuntimeConfigContextValue {
   error: Error | undefined;
 }
 
+// Module-level cache for synchronous access from non-React code
+let cachedConfig: RuntimeConfig | undefined;
+
+/**
+ * Get the cached runtime config synchronously.
+ * Returns undefined if config hasn't been loaded yet.
+ * Use this for class-based APIs that can't use hooks.
+ */
+export function getCachedRuntimeConfig(): RuntimeConfig | undefined {
+  return cachedConfig;
+}
+
 const RuntimeConfigContext = createContext<RuntimeConfigContextValue>({
   config: undefined,
   isLoading: true,
@@ -50,11 +62,14 @@ export const RuntimeConfigProvider: React.FC<RuntimeConfigProviderProps> = ({
           throw new Error(`Failed to fetch config: ${response.status}`);
         }
         const data = (await response.json()) as RuntimeConfig;
+        cachedConfig = data; // Populate module-level cache
         setConfig(data);
       } catch (error_) {
         console.error("RuntimeConfigProvider: Failed to load config", error_);
         // Fallback to localhost for development
-        setConfig({ baseUrl: "http://localhost:3000" });
+        const fallback = { baseUrl: "http://localhost:3000" };
+        cachedConfig = fallback; // Populate cache even on error
+        setConfig(fallback);
         setError(error_ instanceof Error ? error_ : new Error(String(error_)));
       } finally {
         setIsLoading(false);