@checkstack/frontend 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,94 @@
 # @checkstack/frontend
 
+## 0.2.1
+
+### Patch 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
+
+- Updated dependencies [4eed42d]
+  - @checkstack/frontend-api@0.3.0
+  - @checkstack/auth-frontend@0.3.1
+  - @checkstack/catalog-frontend@0.3.1
+  - @checkstack/command-frontend@0.2.1
+  - @checkstack/ui@0.2.2
+
+## 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/frontend-api@0.2.0
+  - @checkstack/common@0.3.0
+  - @checkstack/auth-frontend@0.3.0
+  - @checkstack/catalog-frontend@0.3.0
+  - @checkstack/command-frontend@0.2.0
+  - @checkstack/ui@0.2.1
+  - @checkstack/signal-common@0.1.1
+  - @checkstack/signal-frontend@0.0.7
+
 ## 0.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/frontend",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -21,6 +21,8 @@
     "@checkstack/signal-frontend": "workspace:*",
     "@checkstack/ui": "workspace:*",
     "@orpc/client": "^1.13.2",
+    "@tanstack/react-query": "^5.64.0",
+    "@tanstack/react-query-devtools": "^5.64.0",
     "better-auth": "^1.1.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

package/src/App.tsx

@@ -23,7 +23,10 @@ import {
   RuntimeConfigProvider,
   useRuntimeConfigLoading,
   useRuntimeConfig,
+  OrpcQueryProvider,
 } from "@checkstack/frontend-api";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ConsoleLoggerApi } from "./apis/logger-api";
 import { CoreFetchApi } from "./apis/fetch-api";
 import { CoreRpcApi } from "./apis/rpc-api";
@@ -37,6 +40,20 @@ import { SignalProvider } from "@checkstack/signal-frontend";
 import { usePluginLifecycle } from "./hooks/usePluginLifecycle";
 import { useCommands, useGlobalShortcuts } from "@checkstack/command-frontend";
 
+// Create a stable query client instance
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // Default stale time of 30 seconds for all queries
+      staleTime: 30_000,
+      // Keep unused data in cache for 5 minutes
+      gcTime: 5 * 60 * 1000,
+      // Don't refetch on window focus by default (can be overridden per query)
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 /**
  * Component that registers global keyboard shortcuts for all commands.
  * Uses react-router's navigate for SPA navigation.
@@ -194,13 +211,19 @@ function AppWithApis() {
   }
 
   return (
-    <ApiProvider registry={apiRegistry}>
-      <SignalProvider backendUrl={baseUrl}>
-        <ToastProvider>
-          <AppContent />
-        </ToastProvider>
-      </SignalProvider>
-    </ApiProvider>
+    <QueryClientProvider client={queryClient}>
+      <ApiProvider registry={apiRegistry}>
+        <OrpcQueryProvider>
+          <SignalProvider backendUrl={baseUrl}>
+            <ToastProvider>
+              <AppContent />
+            </ToastProvider>
+          </SignalProvider>
+        </OrpcQueryProvider>
+      </ApiProvider>
+      {/* DevTools only in development - toggle with keyboard or floating button */}
+      <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
+    </QueryClientProvider>
   );
 }
 

package/vite.config.ts

@@ -53,7 +53,13 @@ export default defineConfig(() => {
       // Force all monorepo packages to use the same React copy at build time.
       // Without this, each workspace package can bundle its own React copy,
       // causing "useContext is null" errors from context mismatch.
-      dedupe: ["react", "react-dom", "react-router-dom", "react/jsx-runtime"],
+      dedupe: [
+        "react",
+        "react-dom",
+        "react-router-dom",
+        "react/jsx-runtime",
+        "@tanstack/react-query",
+      ],
       alias: {
         "@": path.resolve(__dirname, "./src"),
       },