Sedrino Dev Tool

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

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

• Query options

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

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

• Mutations (hooks and helpers)

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<number>(key) ?? 0) as number;
      qc.setQueryData<number>(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<number>(key) ?? 0) as number;
      qc.setQueryData<number>(key, Math.max(prev - 1, Number.MIN_SAFE_INTEGER));
    },
  });
}

Non-hook helpers for event handlers outside React:

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

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

export function decrementCounter(qc: QueryClient) {
  const key = devtoolKeys.counter();
  const prev = (qc.getQueryData<number>(key) ?? 0) as number;
  qc.setQueryData<number>(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.