From 7ff39c9e3b29d30aabc2262c1f6baa04ab31e6bf Mon Sep 17 00:00:00 2001
From: "Mahatthana (Kelvin) Nomsawadi" <me@bboykelvin.dev>
Date: Mon, 8 Jul 2024 18:41:28 +0700
Subject: [PATCH] docs(sdk): Document how to reload Metabase embedding SDK
components (#45194)
* Document how to reload Metabase embedding SDK components
* Improve readme clarity on useEffect block
---
.../frontend/src/embedding-sdk/README.md | 34 +++++++++++++++++++
1 file changed, 34 insertions(+)
diff --git a/enterprise/frontend/src/embedding-sdk/README.md b/enterprise/frontend/src/embedding-sdk/README.md
index c6cfa70b842..1089293f364 100644
--- a/enterprise/frontend/src/embedding-sdk/README.md
+++ b/enterprise/frontend/src/embedding-sdk/README.md
@@ -654,6 +654,40 @@ return (
);
```
+### Reloading Metabase components
+
+In case you need to reload a Metabase component, for example, your users modify your application data and that data is used to render a question in Metabase. If you embed this question and want to force Metabase to reload the question to show the latest data, you can do so by using the `key` prop to force a component to reload.
+
+```jsx
+// Inside your application component
+const [data, setData] = useState({});
+// This is used to force reloading Metabase components
+const [counter, setCounter] = useState(0);
+
+// This ensures we only change the `data` reference when it's actually changed
+const handleDataChange = (newData) => {
+ setData(prevData => {
+ if (isEqual(prevData, newData)) {
+ return prevData;
+ }
+
+ return newData
+ });
+};
+
+useEffect(() => {
+ /**
+ * When you set `data` as the `useEffect` hook's dependency, it will trigger the effect
+ * and increment the counter which is used in a Metabase component's `key` prop, forcing it to reload.
+ */
+ if (data) {
+ setCounter(counter => counter + 1);
+ }
+}, [data])
+
+return <InteractiveQuestion key={counter} questionId={yourQuestionId} />
+```
+
# Known limitations
- The Metabase Embedding SDK does not support server-side rendering (SSR) at the moment.
--
GitLab