createSSGHelpers
I'm trying to fetch data in getStaticProps and getting the issue "Promise<{ paths: { params: { id: number; }; }[]; fallback: "blocking"; }>' is not assignable to type 'GetStaticPaths"
Wondering how to appropietly (without using deprecated functions) do SSR with trpc in nextjs.
import {
GetStaticPaths,
GetStaticPropsContext,
InferGetStaticPropsType,
} from 'next';
import { prisma } from "~/server/db";
import { appRouter } from '~/server/api/root';
import superjson from 'superjson';
import Head from 'next/head'
import { api } from "~/utils/api"
import { publicProcedure } from '~/server/api/trpc'
export async function getStaticProps(
context: GetStaticPropsContext<{ id: string }>,
) {
const ssg = await createSSGHelpers({
router: appRouter,
ctx: {},
transformer: superjson, // optional - adds superjson serialization
});
const id = context.params?.id as string;
// prefetch `post.byId`
await ssg.fetchQuery('post.byId', {
id,
});
return {
props: {
trpcState: ssg.dehydrate(),
id,
},
revalidate: 1,
};
}
export const getStaticPaths: GetStaticPaths = async () => {
const posts = await prisma.category.findMany({
select: {
id: true,
},
});
return {
paths: posts.map((post) => ({
params: {
id: post.id,
},
})),
// https://nextjs.org/docs/basic-features/data-fetching#fallback-blocking
fallback: 'blocking',
};
};
import {
GetStaticPaths,
GetStaticPropsContext,
InferGetStaticPropsType,
} from 'next';
import { prisma } from "~/server/db";
import { appRouter } from '~/server/api/root';
import superjson from 'superjson';
import Head from 'next/head'
import { api } from "~/utils/api"
import { publicProcedure } from '~/server/api/trpc'
export async function getStaticProps(
context: GetStaticPropsContext<{ id: string }>,
) {
const ssg = await createSSGHelpers({
router: appRouter,
ctx: {},
transformer: superjson, // optional - adds superjson serialization
});
const id = context.params?.id as string;
// prefetch `post.byId`
await ssg.fetchQuery('post.byId', {
id,
});
return {
props: {
trpcState: ssg.dehydrate(),
id,
},
revalidate: 1,
};
}
export const getStaticPaths: GetStaticPaths = async () => {
const posts = await prisma.category.findMany({
select: {
id: true,
},
});
return {
paths: posts.map((post) => ({
params: {
id: post.id,
},
})),
// https://nextjs.org/docs/basic-features/data-fetching#fallback-blocking
fallback: 'blocking',
};
};
0 Replies