# Quickstart

Learn the fundamentals of working with Hygraph by creating a project, defining a schema, and querying content.

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](https://hygraph.com/docs/getting-started/tutorial/tutorial-overview). 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](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.

**Pro Tip:**

If you’d like a quick overview of the Hygraph interface and navigation, see the [Studio walkthrough](https://hygraph.com/docs/getting-started/studio-walkthrough).

## 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](https://hygraph.com/images/docs/getting-started/fundamentals/first-screen.png)

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](https://hygraph.com/pricing) 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](https://hygraph.com/docs/api-reference/basics/caching) documentation.
4. Click **Add project**. Hygraph redirects you to the project homepage.

    ![Blank new project](https://hygraph.com/images/docs/getting-started/fundamentals/new-project-blank.png)

## 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.

[Video: Create a product model](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmkc6mce6w7w407vzxb6vyz2v)

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](https://hygraph.com/docs/api-reference/schema/field-types).

For this Quickstart, you'll add three fields to the `Product` model:
- `Name`
- `Price`
- `Image`

### Name field

[Video: Create a name field](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmkc6s1powdqg07vz14auk5b2)

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

[Video: Create a price field](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmkc70esywnnz07vztt4j5m2x)

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

[Video: Create an image field](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmkc79pdhwzn707vzq23p0g4d)

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](https://hygraph.com/docs/developer-guides/assets/work-with-assets).

### System fields

Hygraph automatically manages [system fields](https://hygraph.com/docs/api-reference/schema/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](https://hygraph.com/images/docs/getting-started/fundamentals/show-system-fields-toggle.png)

## Create a content entry

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

![Add entry](https://hygraph.com/images/docs/getting-started/fundamentals/add-entry-button.png)

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](https://hygraph.com/docs/api-reference/schema/field-configuration#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](https://hygraph.com/images/docs/getting-started/fundamentals/entry-draft-stage.png)

## Publish your content

By default, all projects include the **DRAFT** and **PUBLISHED** [content stages](https://hygraph.com/docs/developer-guides/content/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.

[Video: Publish your entry and assets](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmkdlaizgcv8a07ureiz3yc1q)

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](https://hygraph.com/images/docs/getting-started/fundamentals/outdated-content-entry.png)

4. You can repeat publishing outdated entries either by clicking the **Publish** button again, or by [scheduling for later](https://hygraph.com/docs/developer-guides/content/scheduled-publishing#how-to-schedule). 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](https://hygraph.com/docs/developer-guides/content/publishing-content) 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](https://hygraph.com/docs/api-reference/basics/api-playground).

![The API Playground](https://hygraph.com/images/docs/getting-started/fundamentals/api-playground.png)

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](https://hygraph.com/docs/api-reference/content-api/queries#fetching-with-relay) to fetch edges/nodes.
3. Enter the following query:

    ```graphql
    {
      products {
        id
        name
        price
        image {
          url
          fileName
        }
      }
    }
    ```
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 `[]`.

    ```json
    {
      "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"
              }
            ]
          }
        ]
      }
    }
    ```

Explore the full [API Reference](https://hygraph.com/docs/api-reference) for additional information on filtering, pagination, ordering, and asset transformations.

**Are you new to GraphQL?:**

Our [Full Tutorial: Build Your First eCommerce Project](https://hygraph.com/docs/getting-started/tutorial/tutorial-overview) offers the option to clone a project that you can use to practice queries.

## 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](https://hygraph.com/docs/api-reference/basics/api-playground).

1. Navigate to the **API Playground** in your Hygraph project.
2. In the API Playground, you'll start with the following:

    ```graphql
    mutation {

    }
    ```

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](https://hygraph.com/images/docs/getting-started/fundamentals/update-product-mutation.png)

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](#query-content) section.

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

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

**Are you new to GraphQL?:**

Our [Full Tutorial: Build Your First eCommerce Project](https://hygraph.com/docs/getting-started/tutorial/tutorial-overview) offers the option to clone a project that you can use to practice mutations.

## 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](https://hygraph.com/docs/api-reference/basics/authorization). Learn more in the [API access](https://hygraph.com/docs/getting-started/access-and-permissions/api-access) documentation.

    ![Content API permissions](https://hygraph.com/images/docs/getting-started/fundamentals/public-content-api-permissions.png)

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](https://hygraph.com/images/docs/getting-started/fundamentals/content-api-url.png)

4. Paste this endpoint in your browser.

5. Run the query from the [Query content](https://hygraph.com/docs/getting-started/quickstart#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](#publish-your-content).

![Content publicly available](https://hygraph.com/images/docs/getting-started/fundamentals/content-publicly-available.png)

## Next steps

| Document                                                                      | About                                                                                                                                   |
|-------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
| [Full Tutorial: Build Your First eCommerce Project](https://hygraph.com/docs/getting-started/tutorial/tutorial-overview) | Build a complete e-commerce project from schema design to a connected frontend.         |
| [Roles and permissions](https://hygraph.com/docs/getting-started/access-and-permissions/user-roles-and-permissions) | Information on roles and permissions including system roles, custom roles, how to work with roles & permissions, and detailed examples. |