Function SolidQueryDevtools

packages/solid-query-devtools/src/devtools.tsx:56–111

(props: DevtoolsOptions)

}

export default function SolidQueryDevtools(props: DevtoolsOptions) {
  const queryClient = useQueryClient(props.client)
  const client = createMemo(() => queryClient)
  let ref!: HTMLDivElement
  const devtools = new TanstackQueryDevtools({
    client: client(),
    queryFlavor: 'Solid Query',
    version: '5',
    onlineManager,
    buttonPosition: props.buttonPosition,
    position: props.position,
    initialIsOpen: props.initialIsOpen,
    errorTypes: props.errorTypes,
    styleNonce: props.styleNonce,
    shadowDOMTarget: props.shadowDOMTarget,
    hideDisabledQueries: props.hideDisabledQueries,
    theme: props.theme,
  })

  createEffect(() => {
    devtools.setClient(client())
  })

  createEffect(() => {
    const buttonPos = props.buttonPosition
    if (buttonPos) {
      devtools.setButtonPosition(buttonPos)
    }
  })

  createEffect(() => {
    const pos = props.position
    if (pos) {
      devtools.setPosition(pos)
    }
  })

  createEffect(() => {
    devtools.setInitialIsOpen(props.initialIsOpen || false)
  })

  createEffect(() => {
    devtools.setErrorTypes(props.errorTypes || [])
  })

  createEffect(() => {
    devtools.setTheme(props.theme || 'system')
  })

  onMount(() => {
    devtools.mount(ref)
    onCleanup(() => devtools.unmount())
  })

  return <div class="tsqd-parent-container" ref={ref}></div>
}