diff --git a/.env.example b/.env.example index 05ccec04..cf81d963 100644 --- a/.env.example +++ b/.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= diff --git a/deploy/env.production b/deploy/env.production index 4345812c..29fef860 100644 --- a/deploy/env.production +++ b/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 diff --git a/deploy/prod/secrets.yaml b/deploy/prod/secrets.yaml index 2ec9fdc1..75203904 100644 --- a/deploy/prod/secrets.yaml +++ b/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 diff --git a/src/components/common/BlockchainInfo.tsx b/src/components/common/BlockchainInfo.tsx index 7d11ee75..b044f6de 100644 --- a/src/components/common/BlockchainInfo.tsx +++ b/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 (
diff --git a/src/components/common/Comment.tsx b/src/components/common/Comment.tsx index 6b222539..a30ad6d4 100644 --- a/src/components/common/Comment.tsx +++ b/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() diff --git a/src/components/site/PostFooter.tsx b/src/components/site/PostFooter.tsx index 997ccaff..b6eb87cd 100644 --- a/src/components/site/PostFooter.tsx +++ b/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() diff --git a/src/components/site/SiteFooter.tsx b/src/components/site/SiteFooter.tsx index 742b4b9c..4b9bdf38 100644 --- a/src/components/site/SiteFooter.tsx +++ b/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 ( <> diff --git a/src/components/site/SiteLayout.server.tsx b/src/components/site/SiteLayout.server.tsx index 6b0f76e5..96d11aee 100644 --- a/src/components/site/SiteLayout.server.tsx +++ b/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), }, } } diff --git a/src/components/site/SitePage.tsx b/src/components/site/SitePage.tsx index e6d9d80e..3dbb8055 100644 --- a/src/components/site/SitePage.tsx +++ b/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 ( <> diff --git a/src/lib/persister.server.ts b/src/lib/persister.server.ts deleted file mode 100644 index d47f078a..00000000 --- a/src/lib/persister.server.ts +++ /dev/null @@ -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 - } -} diff --git a/src/lib/query-client.server.ts b/src/lib/query-client.server.ts deleted file mode 100644 index 6c84fb3b..00000000 --- a/src/lib/query-client.server.ts +++ /dev/null @@ -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 diff --git a/src/pages/_site/[site]/[page].tsx b/src/pages/_site/[site]/[page].tsx index dac25cca..66a98746 100644 --- a/src/pages/_site/[site]/[page].tsx +++ b/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, }, diff --git a/src/pages/_site/[site]/archives.tsx b/src/pages/_site/[site]/archives.tsx index 0f65fdba..be0c34c8 100644 --- a/src/pages/_site/[site]/archives.tsx +++ b/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, }, } diff --git a/src/pages/_site/[site]/feed.tsx b/src/pages/_site/[site]/feed.tsx index ad6c16db..99fc8fc7 100644 --- a/src/pages/_site/[site]/feed.tsx +++ b/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 || "", diff --git a/src/pages/_site/[site]/index.tsx b/src/pages/_site/[site]/index.tsx index 9c14c805..9c741b06 100644 --- a/src/pages/_site/[site]/index.tsx +++ b/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, }, } diff --git a/src/pages/_site/[site]/tag/[tag].tsx b/src/pages/_site/[site]/tag/[tag].tsx index d8dea237..3fab51de 100644 --- a/src/pages/_site/[site]/tag/[tag].tsx +++ b/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, }, diff --git a/src/queries/page.server.ts b/src/queries/page.server.ts index a8107524..829fac6f 100644 --- a/src/queries/page.server.ts +++ b/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[0], + queryClient: QueryClient, ) => { + console.log("fetchGetPage", input) const key = ["getPage", input.page, input] - const data: ReturnType | 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[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[0], + queryClient: QueryClient, ) => { const key = ["getPagesBySite", input.site, input] - const data: ReturnType | 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) + }) } diff --git a/src/queries/page.ts b/src/queries/page.ts index f05b8f4d..9ae9a231 100644 --- a/src/queries/page.ts +++ b/src/queries/page.ts @@ -13,7 +13,7 @@ export const useGetPagesBySite = ( export const useGetPage = (input: Parameters[0]) => { return useQuery(["getPage", input.page, input], async () => { if (!input.site || !(input.page || input.pageId)) { - return undefined + return null } return pageModel.getPage(input) }) diff --git a/src/queries/site.server.ts b/src/queries/site.server.ts index 69f5ca06..3461ab6c 100644 --- a/src/queries/site.server.ts +++ b/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 | 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[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) + }) }