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 Student3 * @param { import("gadget-server").CreateStudentActionContext } context - Everything for running this effect, like the api client, current record, params, etc4 */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:
Learn how to connect to different types of Shopify applications. This includes connecting to embedded apps using the Shopify CLI, custom/public apps built using the Partners dashboard, or custom apps created in the store Admin.
Build a simple application that automatically tags products in a Shopify store based on description keywords. Learn about Shopify connections, Gadget's API, and how to write data back to Shopify.