diff --git a/src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx b/src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx
index 070309c7ac9..c0f8dfb51a4 100644
--- a/src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx
+++ b/src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx
@@ -9,10 +9,10 @@ function App() {
useEffect(() => {
/**
- * This keeps `todo` fresh.
+ * This keeps `post` fresh.
*/
const sub = DataStore.observeQuery(Post, (c) =>
- c.id.eq("e4dd1dc5-e85c-4566-8aaa-54a801396456")
+ c.id.eq('e4dd1dc5-e85c-4566-8aaa-54a801396456')
).subscribe(({ items }) => {
setPost(items[0]);
});
@@ -23,27 +23,27 @@ function App() {
}, []);
/**
- * Create a new Post
- */
- async function onCreate() {
- const post = await DataStore.save(
- new Post({
- title: `New title ${Date.now()}`,
- rating: Math.floor(Math.random() * (8 - 1) + 1),
- status: PostStatus.ACTIVE,
- })
- );
- setPost(post);
- }
+ * Create a new Post
+ */
+ async function onCreate() {
+ const post = await DataStore.save(
+ new Post({
+ title: `New title ${Date.now()}`,
+ rating: Math.floor(Math.random() * (8 - 1) + 1),
+ status: PostStatus.ACTIVE
+ })
+ );
+ setPost(post);
+ }
return (
<>
{post?.title}
-
+
{
/**
* Each keypress updates the post in local React state.
@@ -65,10 +65,10 @@ function App() {
*/
if (!post) return;
await DataStore.save(post);
- console.log("Post saved");
+ console.log('Post saved');
}}
/>
>
);
}
-```
\ No newline at end of file
+```
diff --git a/src/fragments/lib/datastore/native_common/data-access.mdx b/src/fragments/lib/datastore/native_common/data-access.mdx
index 5264181f306..f6cfebc90c6 100644
--- a/src/fragments/lib/datastore/native_common/data-access.mdx
+++ b/src/fragments/lib/datastore/native_common/data-access.mdx
@@ -64,7 +64,7 @@ import js_observe_update from "/src/fragments/lib/datastore/js/data-access/obser
-import reactnative2 from "/src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx";
+import reactnative2 from "/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx";
diff --git a/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx b/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx
new file mode 100644
index 00000000000..42447c9d86e
--- /dev/null
+++ b/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx
@@ -0,0 +1,80 @@
+```js
+// Example showing how to observe the model and keep state updated before
+// performing a save. This uses the useEffect React hook, but you can
+// substitute for a similar mechanism in your application lifecycle with
+// other frameworks.
+
+const App = () => {
+ const [post, setPost] = useState();
+
+ useEffect(() => {
+ /**
+ * This keeps `post` fresh.
+ */
+ const sub = DataStore.observeQuery(Post, (c) =>
+ c.id.eq('5a3b284c-8afc-436a-9027-c8c32bfc8ed2')
+ ).subscribe(({ items }) => {
+ setPost(items[0]);
+ });
+
+ return () => {
+ sub.unsubscribe();
+ };
+ }, []);
+
+ /**
+ * Create a new Post
+ */
+ async function onCreate() {
+ const _post = await DataStore.save(
+ new Post({
+ title: `New title ${Date.now()}`,
+ rating: Math.floor(Math.random() * (8 - 1) + 1),
+ status: PostStatus.ACTIVE
+ })
+ );
+
+ setPost(_post);
+ }
+
+ return (
+
+
+
+
+ {post?.title}
+
+ {
+ /**
+ * Each keypress updates the post in local React state.
+ */
+ setPost(
+ Post.copyOf(post, (draft) => {
+ draft.title = text;
+ })
+ );
+ }}
+ />
+
+
+
+ );
+};
+```