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
Screenshot of Gadget's create a new app page
  • Click the + button in the Models section of the toolbar to create a new model
  • Rename your model to Student
GIF that shows how to add a model, and how to rename the model
  • Click the + Add Field (F) button or use the hotkey F to create a new field
  • Rename your field to Name
GIF that shows how to add a field, and how to rename the field
  • Click the Create action and then click on the Test Action Button to open the GraphQL playground with the create snippet pre-loaded
Screenshot of the API Reference link in the Gadget toolbar
  • Add the following snippet to the Variables section in the playground
Input in Variables
"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
Screenshot of the GraphQL playground with the Student model's Create query and a successful Create operation response
  • Return to Gadget
  • Click on the Data button for Student to see the record you have just added
Screenshot of the Student model's Data button in the Gadget toolbarScreenshot of the Student model's Data page

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
Screenshot of the Student model's Behavior button in the Gadget toolbar
  • Click on the Create action in the actions panel
Screenshot of the Student model's structure page
  • Click + Run Code File
Screenshot of the Student model's Create action panel
  • 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
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!");

  • Go back to your API Playground and re-run the create mutation for Student
  • Click on Logs back in Gadget to open the logger
Screenshot of the Logs button in the Gadget toolbar
  • Toggle User events only on to see the message printed in the Logs
Screenshot of the logger with 'Hello again' as output

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:

Connecting to Shopify
10 mins

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.

Automated product tagger
10 mins

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.