refactor: get rid of @tanstack/solid-query

package.json

@@ -22,7 +22,6 @@
     "@iconify-json/gravity-ui": "^1.2.4",
     "@mtcute/dispatcher": "^0.17.0",
     "@mtcute/node": "^0.17.0",
-    "@tanstack/solid-query": "^5.51.21",
     "@unocss/postcss": "^65.4.3",
     "@unocss/reset": "^65.4.3",
     "astro": "^5.1.9",

pnpm-lock.yaml

@@ -38,9 +38,6 @@ importers:
       '@mtcute/node':
         specifier: ^0.17.0
         version: 0.17.0
-      '@tanstack/solid-query':
-        specifier: ^5.51.21
-        version: 5.51.21(solid-js@1.8.19)
       '@unocss/postcss':
         specifier: ^65.4.3
         version: 65.4.3(postcss@8.5.1)
@@ -1410,14 +1407,6 @@ packages:
     peerDependencies:
       eslint: '>=8.40.0'
 
-  '@tanstack/query-core@5.51.21':
-    resolution: {integrity: sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw==}
-
-  '@tanstack/solid-query@5.51.21':
-    resolution: {integrity: sha512-ZwiTMpownN5qwEZE7UB7ccfGkbzSECkZOv/P1+SQ+dKchNtkF9sA0Zz8IVnr6lgqumkCwS8M65ciBdzI0JfTAQ==}
-    peerDependencies:
-      solid-js: ^1.6.0
-
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -5546,13 +5535,6 @@ snapshots:
       - supports-color
       - typescript
 
-  '@tanstack/query-core@5.51.21': {}
-
-  '@tanstack/solid-query@5.51.21(solid-js@1.8.19)':
-    dependencies:
-      '@tanstack/query-core': 5.51.21
-      solid-js: 1.8.19
-
   '@trysound/sax@0.2.0': {}
 
   '@types/babel__core@7.20.5':

src/components/pages/PageMain/Shoutbox/Shoutbox.tsx

@@ -1,10 +1,9 @@
 /** @jsxImportSource solid-js */
 /* eslint-disable no-alert */
 import type { ShoutsData } from '~/backend/service/shoutbox'
-import { createQuery, keepPreviousData, QueryClient, QueryClientProvider } from '@tanstack/solid-query'
 import { format } from 'date-fns/format'
 
-import { type ComponentProps, createSignal, onMount, Show } from 'solid-js'
+import { createEffect, createSignal, on, onCleanup, onMount, Show } from 'solid-js'
 import { Button } from '../../../ui/Button.tsx'
 
 import { Checkbox } from '../../../ui/Checkbox/Checkbox.tsx'
@@ -12,11 +11,7 @@ import { SectionTitle } from '../../../ui/Section.tsx'
 import { TextArea } from '../../../ui/TextArea.tsx'
 import { TextComment } from '../../../ui/TextComment.tsx'
 
-async function fetchShouts(page: number): Promise<ShoutsData> {
-  return fetch(`/api/shoutbox?page=${page}`).then(r => r.json())
-}
-
-function ShoutboxInner(props: {
+export function Shoutbox(props: {
   initPage: number
   initPageData: ShoutsData
   shoutError?: string
@@ -25,25 +20,38 @@ function ShoutboxInner(props: {
   // eslint-disable-next-line solid/reactivity
   const [page, setPage] = createSignal(props.initPage)
   // eslint-disable-next-line solid/reactivity
-  const [initData, setInitData] = createSignal<ShoutsData | undefined>(props.initPageData)
+  const [shouts, setShouts] = createSignal<ShoutsData | undefined>(props.initPageData)
 
-  const shouts = createQuery(() => ({
-    queryKey: ['shouts', page()],
-    queryFn: () => fetchShouts(page()),
-    cacheTime: 0,
-    gcTime: 0,
-    refetchInterval: 30000,
-    placeholderData: keepPreviousData,
-    initialData: initData,
-  }))
   const [sending, setSending] = createSignal(false)
   const [jsEnabled, setJsEnabled] = createSignal(false)
   onMount(() => setJsEnabled(true))
 
+  function fetchShouts(fetchPage: number) {
+    fetch(`/api/shoutbox?page=${fetchPage}`)
+      .then(r => r.json())
+      .then((data) => {
+        if (fetchPage !== page()) return
+        setShouts(data)
+      })
+  }
+
+  createEffect(on(page, fetchShouts, { defer: true }))
+  createEffect(() => {
+    // emulate tanstack query behavior
+    function refetch() {
+      fetchShouts(page())
+    }
+    const timeout = setInterval(refetch, 30000)
+    window.addEventListener('focus', refetch)
+    onCleanup(() => {
+      clearInterval(timeout)
+      window.removeEventListener('focus', refetch)
+    })
+  })
+
   const onPageClick = (next: boolean) => (e: MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
-    setInitData(undefined)
 
     const newPage = next ? page() + 1 : page() - 1
 
@@ -54,7 +62,7 @@ function ShoutboxInner(props: {
     setPage(newPage)
   }
 
-  const shoutsRender = () => shouts.data?.items.map((props) => {
+  const shoutsRender = () => shouts()?.items.map((props) => {
     const icon = props.pending
       ? <div class="i-gravity-ui-clock size-4" title="awaiting moderation" />
       : `#${props.serial}`
@@ -86,7 +94,7 @@ function ShoutboxInner(props: {
   const onSubmit = (e: Event) => {
     e.preventDefault()
     setSending(true)
-    setInitData(undefined)
+    setShouts(undefined)
 
     const isPrivate = privateCheckbox.checked
     fetch('/api/shoutbox', {
@@ -109,7 +117,7 @@ function ShoutboxInner(props: {
           messageInput.value = ''
         } else {
           alert('shout sent! it will appear after moderation')
-          shouts.refetch()
+          fetchShouts(page())
           messageInput.value = ''
         }
 
@@ -164,7 +172,7 @@ function ShoutboxInner(props: {
             label="make it private"
             name="private"
           />
-          <Show when={shouts.data && shouts.data.pageCount > 1}>
+          <Show when={shouts() && shouts()!.pageCount > 1}>
             <div class="flex gap-2 text-text-secondary">
               <Show when={page() > 0}>
                 <a
@@ -173,18 +181,20 @@ function ShoutboxInner(props: {
                   href={page() === 1 ? '/' : `?shouts_page=${page() - 1}`}
                   onClick={onPageClick(false)}
                   data-astro-reload
+                  data-astro-prefetch="false"
                 >
                   &lt; prev
                 </a>
               </Show>
               <span>{page() + 1}</span>
-              <Show when={page() < shouts.data!.pageCount - 1}>
+              <Show when={page() < shouts()!.pageCount - 1}>
                 <a
                   class="text-text-secondary underline underline-offset-2"
                   rel="external"
                   href={`?shouts_page=${page() + 1}`}
                   onClick={onPageClick(true)}
                   data-astro-reload
+                  data-astro-prefetch="false"
                 >
                   next &gt;
                 </a>
@@ -200,12 +210,3 @@ function ShoutboxInner(props: {
     </section>
   )
 }
-
-export function Shoutbox(props: ComponentProps<typeof ShoutboxInner>) {
-  const client = new QueryClient()
-  return (
-    <QueryClientProvider client={client}>
-      <ShoutboxInner {...props} />
-    </QueryClientProvider>
-  )
-}