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} +