constitutional-coral

How Best to Handle Query Param Side Effect

During development, I'd love to use a

_restore

_restore

query param to potentially delete the indexedDB backing the app. Curious if anyone has a better / more idiomatic way of doing the following? Ideally without hooks (as I intend to use this within an Effect Atom).

useEffect(() => {
  const shouldRestore = dev && new URLSearchParams(location.search).get("_restore") !== null
  if (shouldRestore) {
    (async () => {
      const req = indexedDB.deleteDatabase("/my-db")
      const onDelete = () => {
        const qp = new URLSearchParams(location.search)
        qp.delete("_restore")
        history.replaceState(null, "", `${location.pathname}?${qp.toString()}`)
        location.reload()
      }
      req.onsuccess = () => onDelete()
      req.onerror = (_e) => onDelete()
      req.onblocked = (_e) => onDelete()
    })()
  }

}, [])

useEffect(() => {
  const shouldRestore = dev && new URLSearchParams(location.search).get("_restore") !== null
  if (shouldRestore) {
    (async () => {
      const req = indexedDB.deleteDatabase("/my-db")
      const onDelete = () => {
        const qp = new URLSearchParams(location.search)
        qp.delete("_restore")
        history.replaceState(null, "", `${location.pathname}?${qp.toString()}`)
        location.reload()
      }
      req.onsuccess = () => onDelete()
      req.onerror = (_e) => onDelete()
      req.onblocked = (_e) => onDelete()
    })()
  }

}, [])

TanStack•5mo ago

constitutional-coral

How Best to Handle Query Param Side Effect

During development, I'd love to use a

_restore

_restore

useEffect(() => {
  const shouldRestore = dev && new URLSearchParams(location.search).get("_restore") !== null
  if (shouldRestore) {
    (async () => {
      const req = indexedDB.deleteDatabase("/my-db")
      const onDelete = () => {
        const qp = new URLSearchParams(location.search)
        qp.delete("_restore")
        history.replaceState(null, "", `${location.pathname}?${qp.toString()}`)
        location.reload()
      }
      req.onsuccess = () => onDelete()
      req.onerror = (_e) => onDelete()
      req.onblocked = (_e) => onDelete()
    })()
  }

}, [])

useEffect(() => {
  const shouldRestore = dev && new URLSearchParams(location.search).get("_restore") !== null
  if (shouldRestore) {
    (async () => {
      const req = indexedDB.deleteDatabase("/my-db")
      const onDelete = () => {
        const qp = new URLSearchParams(location.search)
        qp.delete("_restore")
        history.replaceState(null, "", `${location.pathname}?${qp.toString()}`)
        location.reload()
      }
      req.onsuccess = () => onDelete()
      req.onerror = (_e) => onDelete()
      req.onblocked = (_e) => onDelete()
    })()
  }

}, [])

How Best to Handle Query Param Side Effect

Similar Threads

How Best to Handle Query Param Side Effect

Similar Threads

Similar Threads

Similar Threads