How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?

currently trying to do it like this

export async function getServerSideProps(context: any) {
  const { params, req, res } = context;
  const slug = params.slug;
  console.log("parandsfjknvedikv", slug);
  const { data } = api.profile.getUserByUsername.useQuery({
    username: "0xdead",
  });
  console.log("data", data);

  return {
    props: {
      hello: data,
    },
  };
}

export async function getServerSideProps(context: any) {
  const { params, req, res } = context;
  const slug = params.slug;
  console.log("parandsfjknvedikv", slug);
  const { data } = api.profile.getUserByUsername.useQuery({
    username: "0xdead",
  });
  console.log("data", data);

  return {
    props: {
      hello: data,
    },
  };
}

throwing an error about how i cant use the useQuery hook in getServerSideProps which makes sense yeah? so how do i do that?

Brendonovich•7/26/23, 1:05 PM

use the server-side helpers: https://trpc.io/docs/client/nextjs/server-side-helpers

Server-Side Helpers | tRPC

The server-side helpers provides you with a set of helper functions that you can use to prefetch queries on the server. This is useful for SSG, but also for SSR if you opt not to use ssr: true.

BBrendonovich use the server-side helpers: https://trpc.io/docs/client/nextjs/server-side-help...

MjOP•7/26/23, 2:05 PM

appreciate the help.

after implementing SSH, im getting this error

MjOP•7/26/23, 2:05 PM

Brendonovich•7/26/23, 2:06 PM

what are you passing to

router

router

MjOP•7/26/23, 2:07 PM

my profile router

Brendonovich•7/26/23, 2:07 PM

you probably wanna pass in your root router

Brendonovich•7/26/23, 2:08 PM

yea idk what the behaviour is if you pass in a sub router

MjOP•7/26/23, 2:08 PM

ohh from root

MjOP•7/26/23, 2:08 PM

i thought i can pass it in directly

Brendonovich•7/26/23, 2:08 PM

u might be able to and then remove the part but idk if trpc will use the correct cache key in that case

MjOP•7/26/23, 2:18 PM

working now. appreciate your help

MjOP•7/26/23, 2:19 PM

taking theos t3 course. do you have another t3 recommendation after this? trying to get very familiar with the stack

Brendonovich•7/26/23, 2:19 PM

i haven't built anything with t3 haha ¯\_(ツ)_/¯

Brendonovich•7/26/23, 2:20 PM

i just know a lot about the individual parts since we basically recrerated trpc in rust

MjOP•7/26/23, 2:20 PM

oh wow. yet you know trpc so much hahaha

BBrendonovich i just know a lot about the individual parts since we basically recrerated trpc ...

MjOP•7/26/23, 2:20 PM

okay. just realised im talking to a senior

Brendonovich•7/26/23, 2:20 PM

and i know way more than i should about prisma bc i made prisma client rust

BBrendonovich and i know way more than i should about prisma bc i made prisma client rust

MjOP•7/26/23, 2:23 PM

nice. tried to pick up rust, was too difficult so i ended up learning golang

Brendonovich•7/26/23, 2:23 PM

nooooo another person lost to go

MjOP•7/28/23, 12:06 AM

@brendonovich Clerk is really stressing me out. Can you help with something please?

Brendonovich•7/28/23, 12:07 AM

Idk much about Clerk but ask away

MjOP•7/28/23, 12:23 AM

so here's whats happening basically.
following theos t3 tut, i had been using 1 github and 1 gmail account to sign into my app. tried to sign up as a new user now and it always defaults to my github account.
i go through all of the process of selecting the gmail account to sign in with, authorize it then it redirects me to my apps homepage with my github logged in.

jwt token is clearing from the browser so i know my initial signout is actually signing me out

MjOP•7/28/23, 12:26 AM

lmfao just figured out whats happening

MjOP•7/28/23, 12:26 AM

the new email im signing into is the email i used for the github account

MjOP•7/28/23, 12:26 AM

so it's seeing them as 1 user

MjOP•7/28/23, 12:26 AM

which is weird

MjOP•7/28/23, 12:29 AM

Brendonovich•7/28/23, 12:42 AM

ah yea i thought that might be it haha

MjOP•7/30/23, 10:28 PM

hello @brendonovich sorry for the occasional tags but kindly help out please.

following react query docs i'm finding it very difficult to understand or implement optimistic updates on my project

MMj hello @brendonovich sorry for the occasional tags but kindly help out please. f...

Brendonovich•7/31/23, 4:51 AM

Basically when a mutation is triggered you manually update a query’s data, and if the query fails you roll it back

MjOP•7/31/23, 7:53 AM

yes ser i know exactly thats whats happening, just dont know how from the docs.

MjOP•7/31/23, 7:53 AM

i apologize if my questions are basic lol. i'm very junior

MjOP•7/31/23, 7:54 AM

will post a screenshot of where i'm at now

MjOP•7/31/23, 10:07 AM

Here's my code so far

Im confused on the following.

above is returning this error

Type 'unknown' must have a 'Symbol.iterator' method that returns an iterator.ts(2488)

this is also returning this error

'context' is possibly 'undefined'.ts(18048)

where is the context coming from?

MjOP•7/31/23, 10:22 AM

i'd like to understand exactly what this is doing. especially how to implement the new post object because my post object should contain, createAt, title, and content and i should also be getting an author object from clerk so i'd get the profileImageUrl from it.

how do i set those to a temporary object in the newpost??

kindly help please

MMj Here's my code so far ``` const {mutate} = api.posts.create.useMutation({ // ...

Brendonovich•7/31/23, 12:58 PM

Type 'unknown' must have a 'Symbol.iterator' method that returns an iterator.ts(2488)

won't know about the types of your tRPC router since it's just a React Query thing, it has no relation to tRPC. tRPC has that provides properly typed equivalents of each React Query function: https://trpc.io/docs/client/react/useContext#helpers. Would recommend using these instead of using

'context' is possibly 'undefined'.ts(18048)

I'd just return early if

context

context

is undefined

how do i set those to a temporary object in the newpost??

contains all the data that's passed into the mutation, you can customise it as you wish. Idk what you'd do for the clerk stuff but yea u can chuck whatever in there

useContext | tRPC

useContext is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useContext helpers than what we provide...