Do the React Components only work if connected to ...
# support
o
Are the components UI only, and so we can use our own logic so that it interacts with our own backend which does the medplum querying and mutating, or are the components written so that they handle the data fetching themselves using a medplum provider with a connection config directly to medplum? I would like to use some of the components, but we are not using a SPA, nor are we doing a straight connection to medplum from the FE. Our setup is a nextjs app with SSR, ISR, etc, and using our own backend, and only the backend interacts with medplum.
i
Hi @oscadev the UI components are designed to be used directly with Medplum's API. You could extract them and use them with your setup but use of the UI components in that manner isn't really supported
c
Hi @oscadev - That's a common and important question regarding our React components. Our React components, like ResourceTable or PatientTimeline, are designed to work directly with the Medplum API. They rely on our MedplumProvider and MedplumClient to handle data fetching, mutations, and real-time updates. This integration is optimized for direct frontend connections to Medplum. For your Next.js SSR/ISR setup, where your backend is the intermediary and your frontend doesn't directly connect to Medplum, using our components as pure UI elements is achievable by implementing a custom MedplumClient. This is a pattern we use ourselves; our MockClient, for instance, provides an in-memory API for testing. You can apply the same concept: Custom MedplumClient: Create your own class that extends MedplumClient (or implements its core methods). Backend Proxy: In this custom client, you'd implement methods like read, search, create, etc., to make calls to your own backend. Your backend would then communicate with the actual Medplum API (or your data source) and return data in the FHIR format our components expect. Component Integration: Pass an instance of your custom client to the MedplumProvider. Our React components will then use your client for all data operations, fetching data via your backend. This approach allows you to use our UI components as intended while maintaining your architectural separation and leveraging SSR/ISR. It requires implementing the necessary MedplumClient methods to proxy requests, ensuring your backend returns FHIR-compliant data. Does this strategy align with your requirements?
158 Views