The complete guide to use AWS Amplify with SvelteKit- Part 3: Data Models
In the Part 1 and Part 2 of the guide we saw how to manage Authentication and User State in a Sveltekit project leveraging on AWS Amplify service.
In this Part 3 we will see how to create and manage data models in SvelteKit.
1. Configure Data Models in Amplify Studio
To configure your data models, open Amplify Studio by running:
amplify studio
and then selecting “Amplify Studio” (the default option). From the Set up menu select “Data” and the Data Modeling visual editor will appear.
Use Add Model button to create a new model and Add a field to insert additional fields in the model.
To go in deep with Data modeling refer directly to the official documentation at these links: Data Modeling, Relationships
Once you’re ready, click on Save and Deploy and Amplify will start deploying data model resources across AWS AppSync and AWS DynamoDB.
2. Pulling the data model changes into the SvelteKit project
After defining your data model in Amplify Studio, it’s time to integrate it with your SvelteKit project. Amplify Studio will show the parameter to add to the amplify pull command to sync your environment with cloud resources. Copy the full command and run it on the terminal.
Amplify Studio shows you also the code for CRUD operations on the selected model. Let’s see how we can use it.
3. Adding codegen to the SvelteKit project
To use the models in your SvelteKit project we need to generate models schemas running the following command:
amplify codegen model
Amplify will generate code and save at src/models
4. Adding code
We create a model for a Post so let’s define the following structure under routes directory:
the post/+page.svelte page is just a page to call the others. Here the code:
<ul>
<li>
<a href="/post/create">Create</a>
</li>
<li>
<a href="/post/queryAll">Query All</a>
</li>
<li>
<a href="/post/queryOne">Query One</a>
</li>
<li>
<a href="/post/update">Update</a>
</li>
<li>
<a href="/post/delete">Delete</a>
</li>
</ul>We can reuse the code from Amplify Studio and the code to manage the UI. Here the final code:
Create new post
<script lang="ts">
import { DataStore } from '@aws-amplify/datastore';
import { Post } from '../../../models';
let title = '';
let content = '';
const addPost = async (title: string, content: string) => {
try {
await DataStore.save(
new Post({
"title": title,
"content": content
})
);
} catch (error) {
console.error(error);
}
};
</script>
<div class="container">
<div>
<label for="title"><b>Title</b></label>
<input type="text" placeholder="Enter Title" name="title" required bind:value={title} />
<br><br>
<label for="content"><b>Content</b></label>
<input type="text" placeholder="Enter Content" name="content" required bind:value={content} />
<br><br>
<button type="submit" on:click={() => addPost(title, content)}>Add Post</button>
</div>
</div>Delete a post
<script lang="ts">
import { DataStore } from '@aws-amplify/datastore';
import { Post } from '../../../models';
let postId = '';
const deletePost = async (postId: string) => {
try {
const modelToDelete = await DataStore.query(Post, postId);
DataStore.delete(modelToDelete);
} catch (error) {
console.error(error);
}
};
</script>
<div class="container">
<div>
<label for="postId"><b>postId</b></label>
<input type="text" placeholder="Enter postId" name="postId" required bind:value={postId} />
<br><br>
<button type="submit" on:click={() => deletePost(postId)}>Delete Post</button>
</div>
</div>Query one post
<script lang="ts">
import { DataStore } from '@aws-amplify/datastore';
import { Post } from '../../../models';
let queriedPost = null;
let postId = '';
let showPost = false;
const queryOnePost = async (postId: string) => {
try {
queriedPost = await DataStore.query(Post, postId);
showPost = true;
} catch (error) {
console.error('Error quering post:', error);
}
}
</script>
<div class="container">
<div>
<label for="postId"><b>postId</b></label>
<input type="text" placeholder="Enter postId" name="postId" required bind:value={postId} />
<br><br>
<button type="submit" on:click={() => queryOnePost(postId)}>Query One Post</button>
</div>
</div>
<br>
<br>
{#if showPost}
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<tr>
<td>{queriedPost.id}</td>
<td>{queriedPost.title}</td>
<td>{queriedPost.content}</td>
</tr>
</tbody>
</table>
{:else}
<p>No posts found.</p>
{/if}Query all posts
<script lang="ts">
import { DataStore } from '@aws-amplify/datastore';
import { Post } from '../../../models';
let posts = [];
let showTable = false;
const queryAllPosts = async () => {
try {
posts = await DataStore.query(Post);
} catch (error) {
console.error('Error fetching posts:', error);
}
};
</script>
<div>
<button on:click={() => {
showTable = !showTable;
if (showTable) {
queryAllPosts ();
}
}}>
{showTable ? "Hide All Posts" : "Show All Posts"}
</button>
</div>
{#if showTable}
{#if posts.length > 0}
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Content</th>
</tr>
</thead>
<tbody>
{#each posts as post}
<tr>
<td>{post.id}</td>
<td>{post.title}</td>
<td>{post.content}</td>
</tr>
{/each}
</tbody>
</table>
{:else}
<p>No posts found.</p>
{/if}
{/if}
<style>
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>Update a post
<script lang="ts">
import { DataStore } from '@aws-amplify/datastore';
import { Post } from '../../../models';
let postId = '';
let title = '';
let content = '';
let showPost = false;
let original = null;
let updated = null;
const updatePost = async (postId: string, title: string, content: string) => {
try {
original = await DataStore.query(Post, postId);
updated = await DataStore.save(
Post.copyOf(original, updated => {
updated.title = title;
updated.content = content;
})
);
showPost = true;
} catch (error) {
console.error('Error quering post:', error);
}
};
</script>
<div class="container">
<div>
<label for="postId"><b>postId</b></label>
<input type="text" placeholder="Enter postId" name="postId" required bind:value={postId} />
<br><br>
<label for="title"><b>Title</b></label>
<input type="text" placeholder="Enter Title" name="title" required bind:value={title} />
<br><br>
<label for="content"><b>Content</b></label>
<input type="text" placeholder="Enter Content" name="content" required bind:value={content} />
<br><br>
<button type="submit" on:click={() => updatePost(postId, title, content)}>Update Post</button>
</div>
</div>
<br>
<br>
{#if showPost}
<b>Original</b>
<br>
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<tr>
<td>{original.id}</td>
<td>{original.title}</td>
<td>{original.content}</td>
</tr>
</tbody>
</table>
<br><br>
<b>Updated</b>
<br>
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<tr>
<td>{updated.id}</td>
<td>{updated.title}</td>
<td>{updated.content}</td>
</tr>
</tbody>
</table>
{:else}
<p>No posts found.</p>
{/if}
