Whats the point of this ternary operator in the nextjs homepage of Create T3 App?

I thought i knew my nextjs, but there is a

{hello ? hello.greeting : "Loading tRPC query..."}

{hello ? hello.greeting : "Loading tRPC query..."}

while hello is

export default async function Home() {
  const hello = await api.post.hello({ text: "from tRPC" });

export default async function Home() {
  const hello = await api.post.hello({ text: "from tRPC" });

Isnt that await supposed to work like the old "getServersideProps"? when would that Loading state be visible? because i couldnt even get it to trigger locally (it always just shows the greeting).

3 Replies

Aleed.dev•3mo ago

hey what you are checking is if the data exist not if the data is loading to show loading state you can use react supense for that so here is what you are doing

const hello = await api.post.hello({ text: "from tRPC" });  // you are basically saying wait till this fetch is done before you proceed .
{hello ? hello.greeting : "Loading tRPC query..."}// by the time you get to this point is fetch is already done so what you are saying is. if hello has data show hello.greaeting else show loading

const hello = await api.post.hello({ text: "from tRPC" });  // you are basically saying wait till this fetch is done before you proceed .
{hello ? hello.greeting : "Loading tRPC query..."}// by the time you get to this point is fetch is already done so what you are saying is. if hello has data show hello.greaeting else show loading

Aleed.dev•3mo ago

here is how you can do it https://react.dev/reference/react/Suspense

– React

The library for web and native user interfaces

Jotas•3mo ago

Thank you for the answer, i understand the Suspense stuff, however this is not my code, this is default code for the nextjs application in Create T3 App, and im confused on why it works that way considering hello will never be null/undefined

Gaming

Programming

Whats the point of this ternary operator in the nextjs homepage of Create T3 App?