Streamlined way to populate a Query's initialData using getServerSideProps

[MrLeebo]

From Slack:

So if I have an index.tsx that looks like

function Home(): BlitzPage {
 const user = useCurrentUser();
 return user ? <UserDashboard user={user} /> : <MarketingInfo />;
}

then the initial page render is going to be the suspense "Loading..." fallback, but I'd rather it server rendered the page. Would it make sense to return the user in getServerSideProps and call react-query's setQueryData to prepopulate the user data? Or is there a better way to prepopulate the user session? (edited)

flybayer:blitzjs: 11 minutes ago
Good question, I don’t think we have a good pattern for this yet. I think react-query v3 has some nicer utils for this that we can leverage, but until we get that upgraded the way to do it is use the useQuery initialData option. So fetch user in gSSP and pass that data to initialData in the component

Putting this here to brainstorm ideas for what this might look like. I'll try to post some thoughts a little later when I have time to write something up.

[flybayer]

I'm really curious to see what the next.js team comes up with for server components. I suspect that will really help things. Once we get server components I plan to make useQuery work server side in those server components.

[MrLeebo]

Oh man, I forgot about that announcement. Is there an estimate on when server components will ship?

[flybayer]

I haven't heard any dates