feat: disable persister server query client

.env.example

@@ -10,5 +10,3 @@ NEXT_PUBLIC_GITHUB_LINK="https://github.com/Crossbell-Box/xlog"
 NEXT_PUBLIC_CSB_IO="https://crossbell.io"
 NEXT_PUBLIC_CSB_SCAN="https://scan.crossbell.io"
 NEXT_PUBLIC_IPFS_GATEWAY="https://ipfs.4everland.xyz/ipfs/"
-
-REDIS_URL=

deploy/env.production

@@ -7,4 +7,3 @@ NEXT_PUBLIC_GITHUB_LINK=APP_NEXT_PUBLIC_GITHUB_LINK
 NEXT_PUBLIC_CSB_IO=APP_NEXT_PUBLIC_CSB_IO
 NEXT_PUBLIC_CSB_SCAN=APP_NEXT_PUBLIC_CSB_SCAN
 NEXT_PUBLIC_IPFS_GATEWAY=APP_NEXT_PUBLIC_IPFS_GATEWAY
-REDIS_URL=APP_NEXT_REDIS_URL

deploy/prod/secrets.yaml

@@ -8,7 +8,6 @@ stringData:
   NEXT_PUBLIC_CSB_IO: "https://crossbell.io"
   NEXT_PUBLIC_CSB_SCAN: "https://scan.crossbell.io"
   NEXT_PUBLIC_IPFS_GATEWAY: "https://ipfs.4everland.xyz/ipfs/"
-  REDIS_URL: ${REDIS_URL}
 kind: Secret
 metadata:
   name: xlog

src/components/common/BlockchainInfo.tsx

@@ -9,7 +9,7 @@ import { IPFS_SW_GATEWAY_PREFIX } from "~/lib/ipfs-gateway"
 
 export const BlockchainInfo: React.FC<{
   site?: Profile
-  page?: Note
+  page?: Note | null
 }> = ({ site, page }) => {
   return (
     <div className="text-sm">

src/components/common/Comment.tsx

@@ -27,7 +27,7 @@ dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
 export const Comment: React.FC<{
-  page?: Note
+  page?: Note | null
   className?: string
 }> = ({ page, className }) => {
   const { address } = useAccount()

src/components/site/PostFooter.tsx

@@ -25,7 +25,7 @@ import { getLikes, getMints } from "~/models/page.model"
 import { CharacterList } from "~/components/common/CharacterList"
 
 export const PostFooter: React.FC<{
-  page?: Note
+  page?: Note | null
 }> = ({ page }) => {
   const likePage = useLikePage()
   const unlikePage = useUnlikePage()

src/components/site/SiteFooter.tsx

@@ -5,7 +5,7 @@ import Script from "next/script"
 
 export const SiteFooter: React.FC<{
   site?: Profile
-  page?: Note
+  page?: Note | null
 }> = ({ site, page }) => {
   return (
     <>

src/components/site/SiteLayout.server.tsx

@@ -1,50 +1,60 @@
-import { GetServerSideProps } from "next"
 import {
   prefetchGetSite,
   prefetchGetSiteSubscriptions,
 } from "~/queries/site.server"
 import { prefetchGetPagesBySite } from "~/queries/page.server"
 import { PageVisibilityEnum } from "~/lib/types"
-import { dehydrate } from "@tanstack/react-query"
-import { queryClientServer } from "~/lib/query-client.server"
+import { dehydrate, QueryClient } from "@tanstack/react-query"
 import { fetchGetPage } from "~/queries/page.server"
 import { notFound } from "~/lib/server-side-props"
 
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
+export const getServerSideProps = async (
+  ctx: any,
+  queryClient: QueryClient,
+) => {
   const domainOrSubdomain = ctx.params!.site as string
   const pageSlug = ctx.params!.page as string
   const tag = ctx.params!.tag as string
 
-  await prefetchGetSite(domainOrSubdomain)
-  await prefetchGetSiteSubscriptions({
-    siteId: domainOrSubdomain,
-  })
+  await prefetchGetSite(domainOrSubdomain, queryClient)
+  await prefetchGetSiteSubscriptions(
+    {
+      siteId: domainOrSubdomain,
+    },
+    queryClient,
+  )
 
   if (pageSlug) {
-    const page = await fetchGetPage({
-      site: domainOrSubdomain,
-      page: pageSlug,
-      render: true,
-      includeAuthors: true,
-    })
+    const page = await fetchGetPage(
+      {
+        site: domainOrSubdomain,
+        page: pageSlug,
+        render: true,
+        includeAuthors: true,
+      },
+      queryClient,
+    )
 
     if (new Date(page!.date_published) > new Date()) {
       throw notFound()
     }
   } else {
-    await prefetchGetPagesBySite({
-      site: domainOrSubdomain,
-      take: 1000,
-      type: "post",
-      visibility: PageVisibilityEnum.Published,
-      render: true,
-      ...(tag && { tags: [tag] }),
-    })
+    await prefetchGetPagesBySite(
+      {
+        site: domainOrSubdomain,
+        take: 1000,
+        type: "post",
+        visibility: PageVisibilityEnum.Published,
+        render: true,
+        ...(tag && { tags: [tag] }),
+      },
+      queryClient,
+    )
   }
 
   return {
     props: {
-      dehydratedState: dehydrate(queryClientServer),
+      dehydratedState: dehydrate(queryClient),
     },
   }
 }

src/components/site/SitePage.tsx

@@ -4,7 +4,7 @@ import { PostFooter } from "./PostFooter"
 import { Note } from "~/lib/types"
 
 export const SitePage: React.FC<{
-  page?: Note
+  page?: Note | null
 }> = ({ page }) => {
   return (
     <>

src/lib/persister.server.ts

@@ -1,43 +0,0 @@
-import {
-  PersistedClient,
-  Persister,
-} from "@tanstack/react-query-persist-client"
-import Redis from "ioredis"
-
-let redis: Redis
-if (process.env.REDIS_URL) {
-  redis = new Redis(process.env.REDIS_URL)
-
-  redis.on("error", (error: any) => {
-    console.error("Redis error: ", error)
-  })
-  redis.on("end", () => {
-    console.log("Redis end")
-  })
-  redis.on("connect", () => {
-    console.log("Redis connected.")
-  })
-}
-
-export function createRedisPersister(redisValidKey = "reactQuery") {
-  if (process.env.REDIS_URL) {
-    return {
-      persistClient: async (client: PersistedClient) => {
-        redis.set(redisValidKey, JSON.stringify(client))
-      },
-      restoreClient: async () => {
-        const data = await redis.get(redisValidKey)
-        if (data) {
-          return JSON.parse(data)
-        } else {
-          return undefined
-        }
-      },
-      removeClient: async () => {
-        await redis.del(redisValidKey)
-      },
-    } as Persister
-  } else {
-    return null
-  }
-}

src/lib/query-client.server.ts

@@ -1,25 +0,0 @@
-import { QueryClient } from "@tanstack/react-query"
-import { createRedisPersister } from "~/lib/persister.server"
-import { persistQueryClient } from "@tanstack/react-query-persist-client"
-
-const cacheTime = 30 * 60 * 60 * 1000 // 30 days
-
-const persister = createRedisPersister()
-
-const queryClientServerIn = new QueryClient({
-  defaultOptions: {
-    queries: {
-      cacheTime,
-    },
-  },
-})
-
-if (persister) {
-  persistQueryClient({
-    queryClient: queryClientServerIn,
-    persister,
-    maxAge: cacheTime,
-  })
-}
-
-export const queryClientServer = queryClientServerIn

src/pages/_site/[site]/[page].tsx

@@ -3,21 +3,21 @@ import { SiteLayout } from "~/components/site/SiteLayout"
 import { getServerSideProps as getLayoutServerSideProps } from "~/components/site/SiteLayout.server"
 import { SitePage } from "~/components/site/SitePage"
 import { serverSidePropsHandler } from "~/lib/server-side-props"
-import { queryClientServer } from "~/lib/query-client.server"
-import { dehydrate } from "@tanstack/react-query"
+import { dehydrate, QueryClient } from "@tanstack/react-query"
 import { useGetPage } from "~/queries/page"
 import type { ReactElement } from "react"
 
 export const getServerSideProps: GetServerSideProps = serverSidePropsHandler(
   async (ctx) => {
+    const queryClient = new QueryClient()
     const domainOrSubdomain = ctx.params!.site as string
     const pageSlug = ctx.params!.page as string
 
-    await getLayoutServerSideProps(ctx)
+    await getLayoutServerSideProps(ctx, queryClient)
 
     return {
       props: {
-        dehydratedState: dehydrate(queryClientServer),
+        dehydratedState: dehydrate(queryClient),
         domainOrSubdomain,
         pageSlug,
       },

src/pages/_site/[site]/archives.tsx

@@ -4,20 +4,20 @@ import { getServerSideProps as getLayoutServerSideProps } from "~/components/sit
 import { serverSidePropsHandler } from "~/lib/server-side-props"
 import { SiteArchives } from "~/components/site/SiteArchives"
 import { Profile, Notes } from "~/lib/types"
-import { queryClientServer } from "~/lib/query-client.server"
-import { dehydrate } from "@tanstack/react-query"
+import { dehydrate, QueryClient } from "@tanstack/react-query"
 import { useGetPagesBySite } from "~/queries/page"
 import { PageVisibilityEnum } from "~/lib/types"
 import type { ReactElement } from "react"
 
 export const getServerSideProps: GetServerSideProps = serverSidePropsHandler(
   async (ctx) => {
+    const queryClient = new QueryClient()
     const domainOrSubdomain = ctx.params!.site as string
-    await getLayoutServerSideProps(ctx)
+    await getLayoutServerSideProps(ctx, queryClient)
 
     return {
       props: {
-        dehydratedState: dehydrate(queryClientServer),
+        dehydratedState: dehydrate(queryClient),
         domainOrSubdomain,
       },
     }

src/pages/_site/[site]/feed.tsx

@@ -3,19 +3,24 @@ import { fetchGetSite } from "~/queries/site.server"
 import { fetchGetPagesBySite } from "~/queries/page.server"
 import { PageVisibilityEnum } from "~/lib/types"
 import { getSiteLink } from "~/lib/helpers"
+import { QueryClient } from "@tanstack/react-query"
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const queryClient = new QueryClient()
   ctx.res.setHeader("Content-Type", "application/feed+json")
   const domainOrSubdomain = ctx.params!.site as string
 
-  const site = await fetchGetSite(domainOrSubdomain)
-  const pages = await fetchGetPagesBySite({
-    site: domainOrSubdomain,
-    take: 1000,
-    type: "post",
-    visibility: PageVisibilityEnum.Published,
-    render: true,
-  })
+  const site = await fetchGetSite(domainOrSubdomain, queryClient)
+  const pages = await fetchGetPagesBySite(
+    {
+      site: domainOrSubdomain,
+      take: 1000,
+      type: "post",
+      visibility: PageVisibilityEnum.Published,
+      render: true,
+    },
+    queryClient,
+  )
 
   const link = getSiteLink({
     subdomain: site.username || "",

src/pages/_site/[site]/index.tsx

@@ -2,19 +2,19 @@ import { GetServerSideProps } from "next"
 import { SiteHome } from "~/components/site/SiteHome"
 import { SiteLayout } from "~/components/site/SiteLayout"
 import { getServerSideProps as getLayoutServerSideProps } from "~/components/site/SiteLayout.server"
-import { queryClientServer } from "~/lib/query-client.server"
-import { dehydrate } from "@tanstack/react-query"
+import { dehydrate, QueryClient } from "@tanstack/react-query"
 import { useGetPagesBySite } from "~/queries/page"
 import { PageVisibilityEnum } from "~/lib/types"
 import type { ReactElement } from "react"
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const queryClient = new QueryClient()
   const domainOrSubdomain = ctx.params!.site as string
-  await getLayoutServerSideProps(ctx)
+  await getLayoutServerSideProps(ctx, queryClient)
 
   return {
     props: {
-      dehydratedState: dehydrate(queryClientServer),
+      dehydratedState: dehydrate(queryClient),
       domainOrSubdomain,
     },
   }

src/pages/_site/[site]/tag/[tag].tsx

@@ -4,22 +4,22 @@ import { getServerSideProps as getLayoutServerSideProps } from "~/components/sit
 import { serverSidePropsHandler } from "~/lib/server-side-props"
 import { SiteArchives } from "~/components/site/SiteArchives"
 import { Profile, Notes } from "~/lib/types"
-import { queryClientServer } from "~/lib/query-client.server"
-import { dehydrate } from "@tanstack/react-query"
+import { dehydrate, QueryClient } from "@tanstack/react-query"
 import { useGetPagesBySite } from "~/queries/page"
 import { PageVisibilityEnum } from "~/lib/types"
 import type { ReactElement } from "react"
 
 export const getServerSideProps: GetServerSideProps = serverSidePropsHandler(
   async (ctx) => {
+    const queryClient = new QueryClient()
     const domainOrSubdomain = ctx.params!.site as string
     const tag = ctx.params!.tag as string
 
-    await getLayoutServerSideProps(ctx)
+    await getLayoutServerSideProps(ctx, queryClient)
 
     return {
       props: {
-        dehydratedState: dehydrate(queryClientServer),
+        dehydratedState: dehydrate(queryClient),
         domainOrSubdomain,
         tag,
       },

src/queries/page.server.ts

@@ -1,54 +1,33 @@
 import * as pageModel from "~/models/page.model"
-import { queryClientServer } from "~/lib/query-client.server"
+import { QueryClient } from "@tanstack/react-query"
 
 export const fetchGetPage = async (
   input: Parameters<typeof pageModel.getPage>[0],
+  queryClient: QueryClient,
 ) => {
+  console.log("fetchGetPage", input)
   const key = ["getPage", input.page, input]
-  const data: ReturnType<typeof pageModel.getPage> | undefined =
-    queryClientServer.getQueryData(key)
-  if (!data) {
-    return await queryClientServer.fetchQuery(key, async () => {
-      return pageModel.getPage(input)
-    })
-  } else {
-    queryClientServer.prefetchQuery(key, async () => {
-      return pageModel.getPage(input)
-    })
-    return data
-  }
+  return await queryClient.fetchQuery(key, async () => {
+    return pageModel.getPage(input)
+  })
 }
 
 export const prefetchGetPagesBySite = async (
   input: Parameters<typeof pageModel.getPagesBySite>[0],
+  queryClient: QueryClient,
 ) => {
   const key = ["getPagesBySite", input.site, input]
-  const data = queryClientServer.getQueryData(key)
-  if (!data) {
-    await queryClientServer.prefetchQuery(key, async () => {
-      return pageModel.getPagesBySite(input)
-    })
-  } else {
-    queryClientServer.prefetchQuery(key, async () => {
-      return pageModel.getPagesBySite(input)
-    })
-  }
+  await queryClient.prefetchQuery(key, async () => {
+    return pageModel.getPagesBySite(input)
+  })
 }
 
 export const fetchGetPagesBySite = async (
   input: Parameters<typeof pageModel.getPagesBySite>[0],
+  queryClient: QueryClient,
 ) => {
   const key = ["getPagesBySite", input.site, input]
-  const data: ReturnType<typeof pageModel.getPagesBySite> | undefined =
-    queryClientServer.getQueryData(key)
-  if (!data) {
-    return await queryClientServer.fetchQuery(key, async () => {
-      return pageModel.getPagesBySite(input)
-    })
-  } else {
-    queryClientServer.fetchQuery(key, async () => {
-      return pageModel.getPagesBySite(input)
-    })
-    return data
-  }
+  return await queryClient.fetchQuery(key, async () => {
+    return pageModel.getPagesBySite(input)
+  })
 }

src/queries/page.ts

@@ -13,7 +13,7 @@ export const useGetPagesBySite = (
 export const useGetPage = (input: Parameters<typeof pageModel.getPage>[0]) => {
   return useQuery(["getPage", input.page, input], async () => {
     if (!input.site || !(input.page || input.pageId)) {
-      return undefined
+      return null
     }
     return pageModel.getPage(input)
   })

src/queries/site.server.ts

@@ -1,48 +1,29 @@
 import * as siteModel from "~/models/site.model"
-import { queryClientServer } from "~/lib/query-client.server"
+import { QueryClient } from "@tanstack/react-query"
 
-export const prefetchGetSite = async (input: string) => {
+export const prefetchGetSite = async (
+  input: string,
+  queryClient: QueryClient,
+) => {
   const key = ["getSite", input]
-  const data = queryClientServer.getQueryData(key)
-  if (!data) {
-    await queryClientServer.prefetchQuery(key, async () => {
-      return siteModel.getSite(input)
-    })
-  } else {
-    queryClientServer.prefetchQuery(key, async () => {
-      return siteModel.getSite(input)
-    })
-  }
+  await queryClient.prefetchQuery(key, async () => {
+    return siteModel.getSite(input)
+  })
 }
 
-export const fetchGetSite = async (input: string) => {
+export const fetchGetSite = async (input: string, queryClient: QueryClient) => {
   const key = ["getSite", input]
-  const data: ReturnType<typeof siteModel.getSite> | undefined =
-    queryClientServer.getQueryData(key)
-  if (!data) {
-    return await queryClientServer.fetchQuery(key, async () => {
-      return siteModel.getSite(input)
-    })
-  } else {
-    queryClientServer.fetchQuery(key, async () => {
-      return siteModel.getSite(input)
-    })
-    return data
-  }
+  return await queryClient.fetchQuery(key, async () => {
+    return siteModel.getSite(input)
+  })
 }
 
 export const prefetchGetSiteSubscriptions = async (
   input: Parameters<typeof siteModel.getSiteSubscriptions>[0],
+  queryClient: QueryClient,
 ) => {
   const key = ["getSiteSubscriptions", input]
-  const data = queryClientServer.getQueryData(key)
-  if (!data) {
-    await queryClientServer.prefetchQuery(key, async () => {
-      return siteModel.getSiteSubscriptions(input)
-    })
-  } else {
-    queryClientServer.prefetchQuery(key, async () => {
-      return siteModel.getSiteSubscriptions(input)
-    })
-  }
+  await queryClient.prefetchQuery(key, async () => {
+    return siteModel.getSiteSubscriptions(input)
+  })
 }