@tanstack/react-query-devtools
Version:
Developer tools to interact with and visualize the TanStack/react-query cache
56 lines (55 loc) • 1.58 kB
JavaScript
"use client";
import * as React from "react";
import { onlineManager, useQueryClient } from "@tanstack/react-query";
import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
import { jsx } from "react/jsx-runtime";
//#region src/ReactQueryDevtoolsPanel.tsx
function ReactQueryDevtoolsPanel(props) {
const queryClient = useQueryClient(props.client);
const ref = React.useRef(null);
const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries, theme } = props;
const [devtools] = React.useState(new TanstackQueryDevtoolsPanel({
client: queryClient,
queryFlavor: "React Query",
version: "5",
onlineManager,
buttonPosition: "bottom-left",
position: "bottom",
initialIsOpen: true,
errorTypes,
styleNonce,
shadowDOMTarget,
onClose: props.onClose,
hideDisabledQueries,
theme
}));
React.useEffect(() => {
devtools.setClient(queryClient);
}, [queryClient, devtools]);
React.useEffect(() => {
devtools.setOnClose(props.onClose ?? (() => {}));
}, [props.onClose, 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", {
style: {
height: "500px",
...props.style
},
className: "tsqd-parent-container",
ref
});
}
//#endregion
export { ReactQueryDevtoolsPanel };
//# sourceMappingURL=ReactQueryDevtoolsPanel.js.map