@beignet/react-query 0.0.21 → 0.0.23

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @beignet/react-query
 
+## 0.0.23
+
+### Patch Changes
+
+- afa7179: Teach generated UI to colocate React Query options and invalidation helpers under feature client modules.
+
+## 0.0.22
+
 ## 0.0.21
 
 ### Patch Changes

package/README.md

@@ -68,6 +68,54 @@ export function Providers({ children }: { children: ReactNode }) {
 }
 ```
 
+### 3. Add feature client helpers
+
+Keep root `client/` for shared adapter setup, then put feature-specific query
+options, mutation options, invalidation helpers, and hooks under
+`features/<feature>/client/`:
+
+```ts
+// features/todos/client/queries.ts
+import type { QueryClient } from "@tanstack/react-query";
+import { rq } from "@/client";
+import { createTodo, listTodos } from "@/features/todos/contracts";
+
+export function listTodosQueryOptions() {
+  return rq(listTodos).queryOptions({ query: {} });
+}
+
+export function createTodoMutationOptions() {
+  return rq(createTodo).mutationOptions();
+}
+
+export function invalidateTodos(queryClient: QueryClient) {
+  return rq(listTodos).invalidate(queryClient);
+}
+```
+
+Components can import those helpers and keep UI state separate from cache-key
+construction:
+
+```tsx
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  createTodoMutationOptions,
+  invalidateTodos,
+  listTodosQueryOptions,
+} from "@/features/todos/client/queries";
+
+function TodoList() {
+  const queryClient = useQueryClient();
+  const todosQuery = useQuery(listTodosQueryOptions());
+  const createTodoMutation = useMutation({
+    ...createTodoMutationOptions(),
+    onSuccess: () => invalidateTodos(queryClient),
+  });
+
+  return <div>{/* ... */}</div>;
+}
+```
+
 ## Usage
 
 ### Options-first API (recommended)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beignet/react-query",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "type": "module",
   "description": "TanStack Query integration for Beignet",
   "main": "./dist/index.js",

package/skills/client/SKILL.md

@@ -53,14 +53,21 @@ Follow the existing style unless intentionally migrating. Do not mix both
 within one feature.
 
 ```ts
+import type { QueryClient } from "@tanstack/react-query";
 import { rq } from "@/client";
 import { createTodo, listTodos } from "@/features/todos/contracts";
 
-export const listTodosQuery = () =>
-  rq(listTodos).queryOptions({ query: { limit: 20 } });
+export function listTodosQueryOptions() {
+  return rq(listTodos).queryOptions({ query: { limit: 20 } });
+}
+
+export function createTodoMutationOptions() {
+  return rq(createTodo).mutationOptions();
+}
 
-export const createTodoMutation = () =>
-  rq(createTodo).mutationOptions();
+export function invalidateTodos(queryClient: QueryClient) {
+  return rq(listTodos).invalidate(queryClient);
+}
 ```
 
 ## Components