Quickstart: Build a model and explore the CRUD API

Topics covered: Building models, Actions
Time to build: approx. 2 minutes

Hello and welcome to Gadget!

In this quickstart, you are going to create a model, add a new field to that model, and use the automatically generated CRUD API to add a record. This is similar to adding a new database table, adding a column to that table, and inputting a single row. You're going to build a simple backend app to keep track of student names.

• Start by creating a new Gadget app

• Click the + button in the Models section of the toolbar to create a new model
• Rename your model to Student

• Click the + Add Field (F) button or use the hotkey F to create a new field
• Rename your field to Name

• Click the Create action and then click on the Test Action Button to open the GraphQL playground with the create snippet pre-loaded

• Add the following snippet to the Variables section in the playground

{
  "student": {
    "name": "Taylor Redding"
  }
}

• Click the run button OR use the Ctrl + Enter hotkey to run the GraphQL query - you should get a response with success: true and your created model

• Return to Gadget
• Click on the Data button for Student to see the record you have just added

You have successfully built a new model, added a custom field to that model, and used Gadget's generated CRUD API to add a record to that model.

Bonus: Run a code effect

You can also run custom code effects when our CRUD actions run. You are going to add some custom code that prints to Gadget's logger each time a new student is created in your app.

• Click on the Model button for Student

• Click on the Create action in the actions panel

• Click + Run Code File

• Paste the following snippet, which will print a message and the fields of your new Student record to the Logger each time a Student is created

1/**
2 * Effect code for Create on Student
3 * @param { import("gadget-server").CreateStudentActionContext } context - Everything for running this effect, like the api client, current record, params, etc
4 */
5module.exports = async ({ api, record, params, logger }) => {
6  logger.info({ record }, "Hello, student!");
7};

• Go back to your API Playground and re-run the create mutation for Student
• Click on Logs back in Gadget to open the logger

• Toggle User events only on to see the message printed in the Logs

If you go back to Student's data page, you will see a second record has been added as well.

Congrats! You have just added a custom code effect that runs each time you add a new record to Student.

Next steps

We recommend the following tutorials as the next steps: