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.
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',
};
};
