Quickstart: Build a model and explore the CRUD API

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 API Reference link to open the API docs
Screenshot of the API Reference link in the Gadget toolbar
  • Click on Student to open your model's API documentation. This API is automatically generated for you by Gadget as you edit your model and its fields
Screenshot of the Student models's API reference page
  • Go to the Student Create section on the Student API documentation page
  • Pick the GraphQL option in the EXAMPLE CREATE INVOCATION snippet to see a sample GraphQL snippet for creating a new record
Screenshot of the Student models's API reference for the Create action, with the GraphQL snippet
  • Click Open in Playground to open the GraphQL playground with the create snippet pre-loaded OR paste the following snippet in the playground
1mutation ($student: CreateStudentInput) {
2 createStudent(student: $student) {
3 success
4 errors {
5 message
6 ... on InvalidRecordError {
7 validationErrors {
8 apiIdentifier
9 message
10 }
11 }
12 }
13 student {
14 __typename
15 id
16 state
17 createdAt
18 name
19 updatedAt
20 }
21 }
  • Add the following snippet to the Query 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
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. Now you are going to add some custom code that runs as a code effect when we create a new record for Student.

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 Behaviour button for Student
Screenshot of the Student model's Behaviour button in the Gadget toolbar
  • Click on the Create arrow in the state machine, OR click the Create in the Actions panel
Screenshot of the Student model's behaviour page
  • Click + Add Success Effects and select Run Code Snippet
Screenshot of the Student model's Create action panel
  • Name your file logStudentRecord.ts and click Enter to create a new file
Screenshot of ts file added as a code effect on the Student model
  • Click on the Go to file button to open the code file OR click on the file in the Files explorer in the Gadget toolbar
Screenshot of the Go to file button for logStudentRecord.tsScreenshot of logStudentRecord.ts in Gadget's file explorer
  • 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 Shopify10 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 tagger10 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.