sedrino-devtools

$3

Dev-time overlay and cross-window/frame React Query sync utilities.

#### Shared query options and mutations

To keep host (parent) and dev-tool (child) in sync, define and use shared query keys, options, and mutations. Import them in the host app and also use the same helpers inside the dev-tool UI.

- Query key pattern

``ts
export const devtoolKeys = {
all: () => [{ scope: "devtool" }] as const,
counter: () => [{ ...devtoolKeys.all()[0], action: "counter" }] as const,
};
`

- Query options

`ts
import { queryOptions } from "@tanstack/react-query";

export const counterOptions = () =>
queryOptions({
queryKey: devtoolKeys.counter(),
queryFn: async () => 0,
staleTime: Infinity,
gcTime: Infinity,
});
`

- Mutations (hooks and helpers)

`ts
import { useMutation, useQueryClient } from "@tanstack/react-query";

export function useIncrementCounterMutation() {
const qc = useQueryClient();
return useMutation({
mutationFn: async () => true,
onSuccess: () => {
const key = devtoolKeys.counter();
const prev = (qc.getQueryData(key) ?? 0) as number;
qc.setQueryData(key, Math.min(prev + 1, Number.MAX_SAFE_INTEGER));
},
});
}

export function useDecrementCounterMutation() {
const qc = useQueryClient();
return useMutation({
mutationFn: async () => true,
onSuccess: () => {
const key = devtoolKeys.counter();
const prev = (qc.getQueryData(key) ?? 0) as number;
qc.setQueryData(key, Math.max(prev - 1, Number.MIN_SAFE_INTEGER));
},
});
}
`

Non-hook helpers for event handlers outside React:

`ts
import type { QueryClient } from "@tanstack/react-query";

export function incrementCounter(qc: QueryClient) {
const key = devtoolKeys.counter();
const prev = (qc.getQueryData(key) ?? 0) as number;
qc.setQueryData(key, Math.min(prev + 1, Number.MAX_SAFE_INTEGER));
}

export function decrementCounter(qc: QueryClient) {
const key = devtoolKeys.counter();
const prev = (qc.getQueryData(key) ?? 0) as number;
qc.setQueryData(key, Math.max(prev - 1, Number.MIN_SAFE_INTEGER));
}
`

- Host exports
- devtoolKeys
- counterOptions
- useIncrementCounterMutation, useDecrementCounterMutation
- incrementCounter, decrementCounter`

Use the same helpers in both host and child so incremental patches sync cleanly.