compil3
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