A solution for shared state between SSR and client?

Unanswered

Siberian posted this in #help-forum

SiberianOP

2023-07-04T07:56:34.000Z

Hi guys, I need help with the following use case:

I use NextAuth.js to authenticate an user via various providers. When a JWT token is received, additional data is fetched from my NestJS backend, like the user picture and roles. If the user does not exists in the database, it is created using the same query. When the enriched user object is returned, it is set in a reactive variable, provided by Apollo.

After this happens, how can I access that variable in getStaticProps or getServerSideProps? I couldn't find a good way to do it with Apollo, and also tried using Zustand, which didn't work as expected.

Thanks!

6 Replies

@Siberian Hi guys, I need help with the following use case: I use NextAuth.js to authenticate an user via various providers. When a JWT token is received, additional data is fetched from my NestJS backend, like the user picture and roles. If the user does not exists in the database, it is created using the same query. When the enriched user object is returned, it is set in a reactive variable, provided by Apollo. After this happens, how can I access that variable in `getStaticProps` or `getServerSideProps`? I couldn't find a good way to do it with Apollo, and also tried using Zustand, which didn't work as expected. Thanks!

alfon

2023-07-04T12:33:27.000Z

use getServerSession()

don't forget to augment the Session object with typescript so that it shows the correct object types with the added rolse and pfp properties

@alfon don't forget to augment the Session object with typescript so that it shows the correct object types with the added rolse and pfp properties

SiberianOP

2023-07-04T12:34:48.000Z

The session itself doesn't contain all of the information. When it is created, that triggers the additional call to the backend which retrieves the roles.

alfon

2023-07-04T13:37:37.000Z

so where is "all of the information" located?

SiberianOP

2023-07-04T13:39:59.000Z

It is stored in a DynamoDB table and an S3 bucket - contains roles and a picture. The entire flow is described in the original post

Japanese anchovy

2023-07-04T19:06:08.000Z

When the server passes the initial data to the client you can use something like jotai to store it. I've used it in a project and it seemed to work great for me. They have a function for setting that initial value of an atom (what they call it) from the server and then you can use the atom hooks in other places in your client components