Alejo Garcia•11mo ago

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

No replies yetBe the first to reply to this messageJoin