This Quickstart walks you through creating your first Hygraph project, from setup to querying content. If you’re looking for a deeper, end-to-end walkthrough, check out our Full Tutorial: Build Your First eCommerce Project. It expands on these concepts with guided, step-by-step lessons that take you from project creation all the way to connecting a frontend.

#Register

1. You'll need a Hygraph account to get started. Go to https://app.hygraph.com/signup.
2. Select one of the available options:
   • GitHub
   • Google
   • Email, password, and name
3. Select the checkbox to agree to the terms of service and privacy policy, and click Continue.
4. You'll receive a verification email. Click on the provided link and log in using your credentials.

After logging in, you'll land in your project directory. This is where you’ll find all your projects and create new ones. Any pending project invites are available at the top of the screen.

#Create a project

When you log in, you'll see a list of projects you own or have been invited to. If you’re new to Hygraph, this list may be empty.

You can either create a blank project or use our Showcase project to explore how Hygraph works. Click Get started to start exploring the Showcase project. Starting with the Showcase project helps you get a feel for how the platform works.

First screen

To add a blank project, follow these steps:

1. If you've just signed up, click Start from scratch. Otherwise, click Add project.

2. Select your plan. Choose Hobby, Enterprise, or start a 30-day trial. See our Pricing page for details.

3. Provide a project name, an optional description, and a content region. If you need a custom region, contact sales.

   • Hygraph stores your content in the region you select and delivers it globally via our CDN. Learn more in the Caching documentation.

4. Click Add project. Hygraph redirects you to the project homepage.

   Blank new project

#Create a model

Let's create a model for our products. Think of a model as a database table or collection in NoSQL that defines the schema and structure of your content.

1. Open the Schema builder.
2. Click + Add and create a new model named Product, keeping the suggested API IDs.
3. Optionally add a description for editors and API users.
4. Click Add Model.

You’ve added a Product model to your GraphQL schema. With the model in place, you can now start adding fields.

#Add fields to your model

Fields define the data you can store on a model. Each field uses one of Hygraph’s supported field types.

For this Quickstart, you'll add three fields to the Product model:

• Name
• Price
• Image

#Name field

1. Select the Single line text field from the sidebar.
2. Set the Display name to Name.
3. Under Validations, enable Make field required.
4. Click Add.

#Price field

1. Select the Number field from the sidebar.
2. Set the Display name to Price.
3. Under Validations, enable Make field required.
4. Click Add.

#Image field

1. Select the Asset picker field from the sidebar.
2. Set the Display name to Image.
3. Enable Allow multiple assets. This lets you add more than one image to each product entry.
4. Click Add.

Every project includes an Asset model by default. It is used to store images and other files. Learn more about working with assets.

#System fields

Hygraph automatically manages system fields such as id, createdAt, and publishedAt.

To view system fields, enable the Show system fields toggle in the Fields tab for your selected model.

Show system fields

#Create a content entry

With your schema ready, it’s time to add content.

Add entry

1. Navigate to the Content editor in your Hygraph project.
2. Under the Default views list, select the Product view. If your project only has the Product model so far, this view will display automatically when you access the content editor.
3. Your content entries table for Product is currently empty. To create content, click + Add entry at the top-right corner of the screen.
4. Enter details for your new product. The available inputs correspond to the fields you added to the model.
   • Required and multi-value fields are enforced by the schema. Learn more about field validations.
   • Name and Price were set to required in the schema, so the UI here reflects those constraints.
5. Now, upload one or more images for your product. Click Add image, and upload an asset from your computer.
   • Image allows multiple images to be uploaded since we allowed multiple values in the schema.
6. Click Save to keep the entry in DRAFT.

Entry in DRAFT stage

#Publish your content

By default, all projects include the DRAFT and PUBLISHED content stages. Draft is commonly used for previews or staging environments, while Published represents live content. Publishing promotes an entry from DRAFT to PUBLISHED so it can be consumed via the API.

1. Click Publish at the top-right corner of the screen while editing your content entry to publish it. Once you click Publish, a confirmation modal displays. This modal will also include any related entries or assets that are currently in the DRAFT stage and may need publishing as well.

2. If you have unpublished referenced entries, select the All entries checkbox to include all related entries and assets in the DRAFT stage. Then, click Publish.

3. You can continue to make changes to your content entry, and then save it again as many times as you want without publishing. When you save but don't publish, it is marked as outdated. This means the published version differs from the latest draft in your Hygraph project.

   A blue Published pill indicates that the content entry is outdated

4. You can repeat publishing outdated entries either by clicking the Publish button again, or by scheduling for later. Before saving changes you made to a content entry, the Publish button will read Save & Publish instead. Clicking Save & Publish saves and publishes the content at once, so make sure you only use it when the content is ready to go live.

   Check out the document on content publishing for more information.

#Query content

For every model that you create, Hygraph automatically generates GraphQL queries to fetch content entries. You can test these queries in the API Playground.

The API Playground

1. Navigate to the API Playground in your Hygraph project.

2. As you type product in the API Playground, you'll see recommended queries to fetch single or multiple product entries, an individual product version, and the connection query to fetch edges/nodes.

3. Enter the following query:

   {
     products {
       id
       name
       price
       image {
         url
         fileName
       }
     }
   }

   Copy

4. Click the Play icon to run the query.

   • Since we enabled Allow multiple assets on the image field, the API will return our images within an array (denoted by [] in JSON), even if you upload only one image.
   • If you had unchecked Allow multiple assets in the schema, the image field would return a single object {} instead of an array [].

   {
     "data": {
       "products": [
         {
           "id": "cmkcb1fu3itum07moq2f5pzjj",
           "name": "My product entry",
           "price": 2000,
           "image": [
             {
               "url": "https://eu-west-2.graphassets.com/cmk6vvkkl0dzk07mj5law3czs/cmkci63gk05hv07mmqaf80haj",
               "fileName": "t-shirt-white.jpg"
             }
           ]
         }
       ]
     }
   }

   Copy

Explore the full API Reference for additional information on filtering, pagination, ordering, and asset transformations.

#Mutate content

For every model that you create, Hygraph automatically generates GraphQL mutations so you can create, update, delete, publish, and unpublish content entries. You can try out all mutations in the API Playground.

1. Navigate to the API Playground in your Hygraph project.

2. In the API Playground, you'll start with the following:

   mutation {
   
   }

   Copy

3. Start typing product to see mutations for the Product model. For this example, we'll use the updateProduct mutation to modify the product entry we previously created using the UI.

   • Hover over the mutation to view its arguments and documentation.
   • Explore input types such as ProductUpdateInput to see available fields.

   updateProduct mutation

4. Use the where and data arguments to write the mutation. In this example, you’ll update the price field.

   • You'll need an id of the product you created previously to continue. You can copy it from the query results in the Query content section.

   mutation {
     updateProduct(where: { id: "<ADD_YOUR_ID_HERE>" }, data: { price: 25 }) {
       id
       name
       price
     }
   }

   Copy

5. Click the Play icon to execute this mutation. The product entry is updated with the new price value.

#API access

To access your content outside of Hygraph, you need to configure Content API permissions.

1. Navigate to Project settings > Access > Content API.

2. To create new permissions, click Initialize defaults. This sets Read permissions on all models on the PUBLISHED stage. This means that anyone can read published content via the Content API. You can also protect the API with permanent auth tokens. Learn more in the API access documentation.

   Content API permissions

3. Now that the API is public, let's test it. Go to Project settings > Access > Endpoints, and copy the High Performance Content API endpoint. This is the default Content API used for production reads.

   Content API URL

4. Paste this endpoint in your browser.

5. Run the query from the Query content section of this document. This is now publicly accessible on the web.

   • If you see any errors, verify that you've published at least one Product content entry.

Content publicly available

#Next steps