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
Aleed.dev6d 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
Aleed.dev6d ago
– React
The library for web and native user interfaces
Jotas
Jotas6d 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
Want results from more Discord servers?
Add your server
More Posts