compil3
TTCTheo's Typesafe Cult
•Created by compil3 on 9/17/2023 in #questions
SSG not pre-fetching data
nevermind I found the issue. it was some typescript error. I had to do
profile.followers?.length
7 replies
TTCTheo's Typesafe Cult
•Created by compil3 on 9/17/2023 in #questions
SSG not pre-fetching data
import { createServerSideHelpers } from "@trpc/react-query/server";
import { appRouter } from "./root";
import superjson from "superjson";
import { createInnerTRPCContext } from "./trpc";
export function ssgHelper() {
return createServerSideHelpers({
router: appRouter,
ctx: createInnerTRPCContext({ session: null }),
transformer: superjson,
});
}
import { createServerSideHelpers } from "@trpc/react-query/server";
import { appRouter } from "./root";
import superjson from "superjson";
import { createInnerTRPCContext } from "./trpc";
export function ssgHelper() {
return createServerSideHelpers({
router: appRouter,
ctx: createInnerTRPCContext({ session: null }),
transformer: superjson,
});
}
import { z } from "zod";
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
export const profileRouter = createTRPCRouter({
getById: publicProcedure
.input(z.object({ id: z.string() }))
.query(async ({ input: { id }, ctx }) => {
const currentUserId = ctx.session?.user.id;
const profile = await ctx.db.user.findUnique({
where: { id },
select: {
name: true,
image: true,
_count: {
select: { followers: true, follows: true, tweets: true },
},
followers:
currentUserId == null
? undefined
: { where: { id: currentUserId } },
},
});
if (profile == null) return;
return {
name: profile.name,
image: profile.image,
followersCount: profile._count.followers,
followsCount: profile._count.follows,
tweetsCount: profile._count.tweets,
isFollowing: profile.followers.length > 0,
};
}),
});
import { z } from "zod";
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
export const profileRouter = createTRPCRouter({
getById: publicProcedure
.input(z.object({ id: z.string() }))
.query(async ({ input: { id }, ctx }) => {
const currentUserId = ctx.session?.user.id;
const profile = await ctx.db.user.findUnique({
where: { id },
select: {
name: true,
image: true,
_count: {
select: { followers: true, follows: true, tweets: true },
},
followers:
currentUserId == null
? undefined
: { where: { id: currentUserId } },
},
});
if (profile == null) return;
return {
name: profile.name,
image: profile.image,
followersCount: profile._count.followers,
followsCount: profile._count.follows,
tweetsCount: profile._count.tweets,
isFollowing: profile.followers.length > 0,
};
}),
});
7 replies
TTCTheo's Typesafe Cult
•Created by compil3 on 9/17/2023 in #questions
SSG not pre-fetching data
import type {
GetStaticPaths,
GetStaticPropsContext,
InferGetStaticPropsType,
NextPage,
} from "next";
import Head from "next/head";
import React from "react";
import { ssgHelper } from "~/server/api/ssgHelper";
import { api } from "~/utils/api";
import ErrorPage from "next/error";
const ProfilePage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
id,
}) => {
const { data: profile } = api.profile.getById.useQuery({ id });
if (profile == null) {
return <ErrorPage statusCode={404} />;
}
return (
<>
<Head>
<title>{`Twitter Clone - ${profile.name}`}</title>
</Head>
{profile.name} // instead of showing this content, The Errorpage flashes for 1 second, before showing the content
</>
);
};
export const getStaticPaths: GetStaticPaths = () => {
return {
paths: [],
fallback: "blocking",
};
};
export async function getStaticProps(
context: GetStaticPropsContext<{ id: string }>,
) {
const id = context.params?.id;
if (id == null) {
return {
redirect: {
destination: "/",
},
};
}
const ssg = ssgHelper();
await ssg.profile.getById.prefetch({ id });
return {
props: {
trpcState: ssg.dehydrate(),
id,
},
};
}
export default ProfilePage;
import type {
GetStaticPaths,
GetStaticPropsContext,
InferGetStaticPropsType,
NextPage,
} from "next";
import Head from "next/head";
import React from "react";
import { ssgHelper } from "~/server/api/ssgHelper";
import { api } from "~/utils/api";
import ErrorPage from "next/error";
const ProfilePage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
id,
}) => {
const { data: profile } = api.profile.getById.useQuery({ id });
if (profile == null) {
return <ErrorPage statusCode={404} />;
}
return (
<>
<Head>
<title>{`Twitter Clone - ${profile.name}`}</title>
</Head>
{profile.name} // instead of showing this content, The Errorpage flashes for 1 second, before showing the content
</>
);
};
export const getStaticPaths: GetStaticPaths = () => {
return {
paths: [],
fallback: "blocking",
};
};
export async function getStaticProps(
context: GetStaticPropsContext<{ id: string }>,
) {
const id = context.params?.id;
if (id == null) {
return {
redirect: {
destination: "/",
},
};
}
const ssg = ssgHelper();
await ssg.profile.getById.prefetch({ id });
return {
props: {
trpcState: ssg.dehydrate(),
id,
},
};
}
export default ProfilePage;
7 replies
TTCTheo's Typesafe Cult
•Created by compil3 on 9/17/2023 in #questions
SSG not pre-fetching data
Here is my code:
7 replies