Theo's Typesafe Cult•2y ago

should I use a trpc request when using getStaticPaths()?

Should I do a trpc request instead of getStaticProps or is this template fine? If the template is fine, how do I get types through my props?

40 Replies

julius•2y ago

ssg helpers are good for this usecase https://trpc.io/docs/v10/ssg-helpers

Johnson•2y ago

I took a look at those before and was hoping I could not use them cause they seem really complicated lol but, thx! I'll take a look again

julius•2y ago

here's an example https://github.com/trpc/trpc/blob/58bca24812ce6b3be1cc02a56128e09724c45687/examples/next-prisma-todomvc/src/pages/%5Bfilter%5D.tsx#L352-L381

GitHub

trpc/[filter].tsx at 58bca24812ce6b3be1cc02a56128e09724c45687 · trp...

🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy. - trpc/[filter].tsx at 58bca24812ce6b3be1cc02a56128e09724c45687 · trpc/trpc

Johnson•2y ago

ty so much any idea why I cant import the ssgHelper? I only get: Cannot find module '@trpc/react-query/ssg' or its corresponding type declarations.ts(2307) thats the import: import { createProxySSGHelpers } from '@trpc/react-query/ssg';

julius•2y ago

what version?

Johnson•2y ago

of trpc?

julius•2y ago

@trpc/react was renamed to @trpc/react-query on beta.21 so if you're lower than that

Johnson•2y ago

julius•2y ago

do import { createProxySSGHelpers } from '@trpc/react/ssg';

Johnson•2y ago

seems like I am on beta 17 works god how do you know all this xD its impressive

julius•2y ago

im on the trpc core team too so i'm up to date on the releases there

Johnson•2y ago

ahhh nice

julius•2y ago

https://trpc.io/docs/v10/migrate-from-v9-to-v10#renaming-of-trpcreact-to-trpcreact-query

Migrate from v9 to v10 | tRPC

- tRPC v10 is ready for production and can safely be used today.

Johnson•2y ago

yeah I was about to ask if it makes sense to migrate

Johnson•2y ago

Johnson•2y ago

Johnson•2y ago

I seem to have issues with having to pass an argument to the context to me it seems like that was optional in the old version, idk what went wrong here

julius•2y ago

https://beta.create.t3.gg/en/usage/trpc#-servertrpccontextts for the ssg helpers, you'd use the createContextInner function

ctx: await createContextInner({ session: null }); // <-- pass session too

ctx: await createContextInner({ session: null }); // <-- pass session too

Create T3 App

tRPC 🚀 Create T3 App

The best way to setup an opinionated, full-stack, typesafe Next.js project

Johnson•2y ago

ahh so I was reading from a v10 document template probably would you say it makes sense to upgrade now? because I feel like I am writing dead code rn or rather code that has to be replaced

julius•2y ago

the upgrades are really small, generally only 1 PR, some days there are multiple

Johnson•2y ago

hmmm okay

nexxel•2y ago

julius is a god

Johnson•2y ago

so the idea here is that I use the trpc queries I made (which access the database), to then populate all the generated sites with the fetched data, right?

Johnson•2y ago

but I don't entirely get the difference between fetch and prefetch, am I not going to fetch anyway when the sites are actually generated?

julius•2y ago

yep, you'd do a fetch in the getStaticProps and then a useQuery on the component that would fetch the data on server and put it in the queryCache for the client to grab you want fetch in order for the site to be static, prefetch is when you dont need the data right away

Johnson•2y ago

ah and because I would usually fetch something like a users posts, I want the data => I want to fetch and not prefetch or not even the users posts could just fetch all posts

julius•2y ago

yea tbh i dont really know the difference, just that fetch returns the value and prefetch doesn't, so if you want to render a site statically you need to fetch

Johnson•2y ago

julius•2y ago

prefetch would require more javascript so that the value is put into the cache etc yaddiayadda xD for example, our ssg test here https://github.com/trpc/trpc/tree/next/examples/.test/ssg runs playwright with javascript disabled if we would change the fetch to prefetch then the data wouldn't be there since javascript is disabled

Johnson•2y ago

kinda interesting not gonna lie can I ask you how you would approach a certain problem? Because I want to know if the approach I am thinking of actually works

julius•2y ago

ask away

Johnson•2y ago

nice so basically: users make posts, posts can be searched for, posts are generated via ssg and: users can edit their own posts via an edit button now I am thinking of how to verify when a user is actually on the generated site of their own post I have 2 approaches in mind: 1: when the post is created, put the userId as 'dead weight', as additional data on the generated site, so then I can check the current session.id against that everytime someone connects to the post 2: everytime someone connects to the post, check usernames and make usernames unique but the more I think about it, approach 2 is kinda like 1 except for usernames I might be confused here lol actually I think 1. is the way to go now that I typed it out xD

julius•2y ago

i am not sure i get what you're asking 🤔

Johnson•2y ago

ye I might not have explained that very well

julius•2y ago

you mean like verifying that the user wrote that post?

Johnson•2y ago

well I need to render the edit button on the page if the user who actually made that post re-visits it so yeah

julius•2y ago

i'd do something like this

const PostPage = () => {
  const { data: post } = trpc.post.byId.useQuery({ id: "some-id" });
  const { data: session } = trpc.auth.session.useQuery(); // or useSession whichever you use
  const canEdit = session?.user && session.user.id === post?.id

  return (
    ...
    {canEdit && <EditButton />}
  );
};

const PostPage = () => {
  const { data: post } = trpc.post.byId.useQuery({ id: "some-id" });
  const { data: session } = trpc.auth.session.useQuery(); // or useSession whichever you use
  const canEdit = session?.user && session.user.id === post?.id

  return (
    ...
    {canEdit && <EditButton />}
  );
};

Johnson•2y ago

yeah and 'some-id' would be passed down as props from getStaticProps I assume (during the ssg I guess)

julius•2y ago

the same id of the post you're fetching

Johnson•2y ago

yeah I think I get it now thats smort so every time someone connects, based on the link that was generated (postID) I make a request for the post (as data I can work with) and then I can access post.userID ty so much for the help again

Gaming

Programming

should I use a trpc request when using getStaticPaths()?