@tanstack/react-query-devtools
Version:
Developer tools to interact with and visualize the TanStack/react-query cache
58 lines (57 loc) • 1.72 kB
JavaScript
"use client";
import * as React from "react";
import { onlineManager, useQueryClient } from "@tanstack/react-query";
import { TanstackQueryDevtools } from "@tanstack/query-devtools";
import { jsx } from "react/jsx-runtime";
//#region src/ReactQueryDevtools.tsx
function ReactQueryDevtools(props) {
const queryClient = useQueryClient(props.client);
const ref = React.useRef(null);
const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries, theme } = props;
const [devtools] = React.useState(new TanstackQueryDevtools({
client: queryClient,
queryFlavor: "React Query",
version: "5",
onlineManager,
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
}));
React.useEffect(() => {
devtools.setClient(queryClient);
}, [queryClient, devtools]);
React.useEffect(() => {
if (buttonPosition) devtools.setButtonPosition(buttonPosition);
}, [buttonPosition, devtools]);
React.useEffect(() => {
if (position) devtools.setPosition(position);
}, [position, devtools]);
React.useEffect(() => {
devtools.setInitialIsOpen(initialIsOpen || false);
}, [initialIsOpen, devtools]);
React.useEffect(() => {
devtools.setErrorTypes(errorTypes || []);
}, [errorTypes, devtools]);
React.useEffect(() => {
devtools.setTheme(theme);
}, [theme, devtools]);
React.useEffect(() => {
if (ref.current) devtools.mount(ref.current);
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ jsx("div", {
dir: "ltr",
className: "tsqd-parent-container",
ref
});
}
//#endregion
export { ReactQueryDevtools };
//# sourceMappingURL=ReactQueryDevtools.js.map