Write Data in a DB Model in Blitzjs
Similar to The Blitz queries, mutations are also are plain, asynchronous JavaScript functions that always run on the server. And they must be inside a mutations folder
Mutations must be inside mutations folder
Example:
app/mutations/createPost.tsapp/posts/mutations/createPost.tsapp/admin/posts/mutations/createPost.ts
To write to the database you can use the db package e.g db.{modelName}.create.
Example:
import db, { PostCreateArgs } from "db"
type PostCreateInput = {
data: PostCreateArgs["data"]
}
export default async function ({ data }: PostCreateInput) {
const post = await db.post.create({ data })
return post
}
To use the mutation client-side you can import it into your React Component directly.
Example:
import createPost from "app/posts/mutations/createPost"
const NewPost = () => {
return (
<form
onSubmit={async (e) => {
e.preventDefault()
const post = await createPost({
data: { title: "new Title", slug: "new-post", content: "some new content" },
})
}}
>
<button type="submit">Create a new Random Post</button>
</form>
)
}
export default NewPost
Khaled Garbaya: [0:00] First, let's go and create a mutation. This will be inside of posts that also holds our queries. Inside of posts, let's create a new folder, call it the mutations. Inside of mutation, let's create a new file, call it createPost.ts. We need to import the db from db. Also, we need to import the type of the data which will be createPost and then Args.
[0:36] Here, let's define the type that we will send to this mutation. This one will be PostCreateInput. Then here, we'll have data, and the data will be of type PostCreateArgs. Then, we'll get the data field from the knowledge export, I'll createPost function.
[0:59] Let's export our createPost function. This will be an async function. We will get an object with data inside, so we'll extract the data. The type is going to be what we defined up there, so it's going to be PostCreateInput.
[1:18] Let's call the database to create a post. In here, we'll create the const post and then we will await db. The name of the model in this case will be post, and then we will have a create inside of that object.
[1:36] Here, we simply pass in the data. Once that's created, it will give us back a post object, so we can return it. That's our mutation done.
[1:48] Let's create a page where we can create posts. Here inside of posts, inside of pages, we will create a new file. Let's call it new.tsx. Let's create our page. Here, we will have a NewPost page.
[2:09] For now, let's return a div with something called NewPost. Let's export default the NewPost page.
[2:24] Let's go here. Instead of Hello World here, we will have posts/new, and you can see our page is created. Let's replace this with a form. Here, we will have a form and then onSubmit.
[2:43] We want to create a new Random Post. Here, we'll receive an event. Then, we'll do e.preventDefault(), and let's close the form.
[2:59] Inside of here, let's add a button of type="submit". We can give it a label of Create a new Random Post. You can see here the form. It's doing nothing for now. Let's first import our createPost mutation from app/posts/mutations/createPost.
[3:23] Let's make this function asynchronous. Here, we will do const post, and then we'll do await createPost. We can pass in the data, and inside of the data, we will have title. Let's just call it new Title.
[3:42] Also, we need to pass SLAG. Then, we'll have it named new post. Finally, we need to pass in some content, and this will be some new content. Let's hit Save.
[3:59] Now, if we click here and everything works, we should have a NewPost, so let's create a new Random Post. You can see here in the log that we indeed created that.
[4:11] To make sure that's indeed working, let's go here and give it the new SLAG, so NewPost and hit Enter. You can see here we were getting the NewPost.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!