Dev-time overlay and cross-window/frame React Query sync utilities.
npm install sedrino-devtoolsDev-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
qc.setQueryData
},
});
}
export function useDecrementCounterMutation() {
const qc = useQueryClient();
return useMutation({
mutationFn: async () => true,
onSuccess: () => {
const key = devtoolKeys.counter();
const prev = (qc.getQueryData
qc.setQueryData
},
});
}
`
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
qc.setQueryData
}
export function decrementCounter(qc: QueryClient) {
const key = devtoolKeys.counter();
const prev = (qc.getQueryData
qc.setQueryData
}
`
- Host exports
- devtoolKeyscounterOptions
- useIncrementCounterMutation
- , useDecrementCounterMutationincrementCounter
- , decrementCounter`
Use the same helpers in both host and child so incremental patches sync cleanly.