https://medplum.com logo
Join Discord
Powered by
Calling Medplum api from NextJS’s getServerSidePro...
# support
b
Hey there. I’m looking for a way to access our medplum data while still fully utilizing getServerSideProps to pre fetch data for the pages in our application. I noticed the only way I can setup the graphql query is by using the useMedplum hook. Unfortunately we can’t use hooks inside functions like getServerSideProps. Is there a proper way to approach this without fetching all the data on the component level?
r
@boogiecoco. The 
useMedplum
hook just returns the 
MedplumClient
object you create during app initialization, so you could always use that object directly instead of calling the hook https://github.com/medplum/medplum-nextjs-demo/blob/main/pages/_app.tsx#L7-L16
However, because your calls to the Medplum GraphQL api are authenticated, you will have to figure out authentication. Next.js has their own ways of handling sessions, but we don't have built-in support for things like Iron-session https://nextjs.org/docs/authentication#authenticating-server-rendered-pages
Because of the Auth challenges, I'd probably recommend starting with client-side fetching for the graphQL query
b
@rahul1 circling back here, I'm interested in making one of our pages fetch medplum graphql data on the server side. I'm still not sure which access/session token we'll need to access on the server side (getServerSideProps) inside the context object. Any information on how to get the proper session token to instantiate a medplum client in getServerSideProps ?
This is using Google Auth, 
startGoogleLogin
`
r
Hi @boogiecoco. - I have a proposal, but I will caveat that our team has not tested it ourselves. - Send the medplum token to the server via encrypted cookie. You can use the 
getAccessToken
(https://www.medplum.com/docs/sdk/classes/MedplumClient#getaccesstoken) method to retrieve the token on the client. Iron session might be applicable here (https://github.com/vercel/next.js/tree/canary/examples/with-iron-session) - You could then read the medplum token inside the 
getServerSideProps
, and use 
setAccessToken
(https://www.medplum.com/docs/sdk/classes/MedplumClient#setaccesstoken) for a client created inside the function to make the calls. You could also make raw 
fetch
calls if creating the client becomes a performance bottlneck
b
I'll try that out, thank you !
r
Please let us know if it works! We'd love to publish a blog post to guide other NextJS users
b
I was able to get the token in getServerSideProps, but still not sure if I should create a new medplum client or reuse the already initialized medplum client that was passed to the ` in _app
is it possible to somehow get the already initialized medplum client object using the access token (now that I have it with iron-session) ?
Like is something like this possible?
Copy code
const medplum = new MedplumClient({
      fetch: async (url: string, options?: any) => await fetch(url, options),
      token: medplumToken 
    });
I'm assuming we may just need to instantiate a new medplum client for every nextjs page, but just wanted to double check with you to see if that sounds problematic
r
Hi @boogiecoco. - unfortunately our team doesn't have deep NextJS experience, so I can't give you informed feedback on the real-world implications of creating a client per-call.
The Medplum client you create for the React Context (
MedplumProvider
) is on the browser side. Next doesn't clone it to the server for you: https://vercel.com/guides/react-context-state-management-nextjs
b
It worked !!
Serverside GraphQL Medplum API call working 🙂
r
Great!
Did you figure out why you were getting an unauthenticated error?
b
I forgot to do setAccessToken
r
I'm filing a ticket - setting from the constructor should also work
311 Views
PreviousNext
Powered by