Theo's Typesafe Cult•2y ago

SSGHelper & GetStaticProps - Not loading data server side?

I'll preface this by saying I've never used SSGHelper nor GetStaticProps before, I'm definitely a noob at this. I've followed the docs here: https://trpc.io/docs/nextjs/ssg-helpers So I have the following code:

export const getServerSideProps = async (context: any) => {
  const session = await getSession(context);

  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: { prisma, session },
    transformer: superjson,
  });

  await ssg.accounts.getAccounts.prefetch();

  return {
    props: {
      ssrAccountData: ssg.dehydrate(),  // Should be trpcState: ssg.dehydrate(). Thank you very much to aditya in the below reply for this fix.
    },
  };
};


const Accounts = (
  props: InferGetServerSidePropsType<typeof getServerSideProps>
) => {
  const { data: accountData, isLoading } = api.accounts.getAccounts.useQuery();

  accountData && console.log("have data");
  isLoading && console.log("loading");

// Other stuff goes on below to display the data - excluded here.
}

The docs state "This query will be immediately available as it's prefetched."; however, after doing this, it all seemed to load the same as before. I put those two console logs in to test if account data was there on load, but the isLoading runs first, then the tRPC query appears in the log, then when it returns the "have data" appears. I saw a post here mentioning if the user had ssr=true in their api.ts config, no real idea what impact that would have I changed that to true, but then I got no data at all, so that is back to false now. I had seen that you can set initial data for the query, which would allow me to pass the data from props into the getAccounts query; however, according to this video, I shouldn't need to and this would not be type safe: https://www.youtube.com/watch?v=G2ZzmgShHgQ So what am I doing wrong?

SSG Helpers | tRPC

createProxySSGHelpers provides you with a set of helper functions that you can use to prefetch queries on the server.

Christopher Ehrlich

YouTube

Advanced tRPC - Callers, functions, and gSSP

Repo for this video: https://github.com/c-ehrlich/you-dont-need-callers If you want to use schema in the frontend, they cannot be imported from the same file as things that run specifically in the backend. One solution would be to put them into a procedureName.schema.ts or similar file. tRPC: https://trpc.io/docs Create T3 App: https://crea...

11 Replies

aditya•2y ago

AFAIK session should be null and in the return statement change ssrAccountData to trpcState

WeiKaiLeOP•2y ago

Thank you! Session was needed because it was a protected route but changing ssrAccountData to trpcState was what did the trick. Not sure why I changed that but knew I was doing something stupid. Thank you so much!

aditya•2y ago

Im also trying to use SSR but cannot make it work🥲🥲 did you make any changes to api.ts or any other files?

WeiKaiLeOP•2y ago

No I didn't. I couldn't manage to get ctx: createInnerTRPCContext({}), to work as per the advanced tRPC video in my post but then I saw in Theo's video he posted recently (T3 stack tutorial) that I don't need to use that, I could just give it prisma and session: null, the latter you suggested. This got rid of errors but in the reponse I was getting when I console logged props it showed it was unauthorised, so I knew I needed to give it the session details as well. perhaps console.log props and see if there is anything there to help troubleshoot from?

aditya•2y ago

ive made a post, here it is https://discord.com/channels/966627436387266600/1091983067729641583 I also tried to retrieve the session and pass it to the ssghelper but no luck

WeiKaiLeOP•2y ago

Sorry mate, I don't know. I've looked around for the last 40 mins to see if I could find anything new but no luck. If you don't manage to find an option to do it that way, could you instead fetch the first 4 items and then pass them from props to the infinite query in your component as initial data?

aditya•2y ago

Thanks for helping!! I'll try this, hope so it works!!

Unknown User•2y ago

Message Not Public

aditya•2y ago

could you please share more details and no unfortunately I wasn't able to fix the infinitequery error😔

Unknown User•2y ago

Message Not Public

aditya•2y ago

 
export const getServerSideProps: GetServerSideProps = async () => {
  const ssg = generateSSGHelper();

  await ssg.posts.getAll.prefetchInfinite({
    limit: 5
  });

  return {
    props: {
      trpcState: ssg.dehydrate(),
    }
  }
};

 
export const getServerSideProps: GetServerSideProps = async () => {
  const ssg = generateSSGHelper();

  await ssg.posts.getAll.prefetchInfinite({
    limit: 5
  });

  return {
    props: {
      trpcState: ssg.dehydrate(),
    }
  }
};

what error do you get?

export function generateSSGHelper() {

  return createProxySSGHelpers({
    router: appRouter,
    ctx: { prisma, session: null },
    transformer: superjson
  });
}

export function generateSSGHelper() {

  return createProxySSGHelpers({
    router: appRouter,
    ctx: { prisma, session: null },
    transformer: superjson
  });
}

the SSGHelper

Gaming

Programming

SSGHelper & GetStaticProps - Not loading data server side?