Get the latest insights, best practices, and tips from power users

Hygraph
Docs

Hygraph onboarding overview

Our Getting Started tutorial takes you from the creation of a project from scratch all the way through to its implementation.

Our pet project is an e-commerce that offers wearables and home goods for sale. We'll start by planning the flow of information, then we'll build a schema based on that, create some content for it, query that content, and integrate it with a front end.

Getting started project previewGetting started project preview

#What you will learn

Our full getting started flow covers eight lessons:

#Lesson 1: The Schema Builder

LessonNameContents
1.1Plan your content flowYou'll learn how to plan your content flow before you start building a schema.
1.2Design your content modelsYou'll learn how to design your content models before you start building a schema.
1.3Build your content modelsYou'll learn how to build your base content models. You'll add complexity to them as you advance in this tutorial.

#Lesson 2: References & Enumerations

LessonNameContents
2.1Configure reference fieldsYou'll learn how to configure different types of references and add them to your content models.
2.2Configure enumerationsYou'll learn how to configure enumerations that we will later use as parts of component fields.

#Lesson 3: Components

LessonNameContents
3.1Build componentsYou'll learn how to build components that you will later add to your models as part of basic and modular component fields.
3.2Add components to your modelsYou'll learn how to add the components we just created to the models in your schema, using basic and modular component fields.

#Lesson 4: Remote Sources

LessonNameContents
4.1Add a Remote SourceYou'll learn how to add a Remote Source to your project in order to fetch information from external third-party web services.
4.2Remote FieldsYou'll learn how to add Remote Fields to your models.
4.3Top-level Remote FieldsYou'll learn how to add Top-level Remote Fields to the Query system model.

#Lesson 5: The Content editor

LessonNameContents
5.1Content creationYou'll learn how to create and modify content in the content creator screen and in the Assets system model.
5.2Content localizationYou'll learn how to add a locale to your project and localize field in your content entries.
5.3Additional content featuresYou'll learn how to work with content stages, content duplication, and content publishing.

#Lesson 6: The API Playground

LessonNameContents
6.1Exercises: QueriesThis document contains exercises to provide queries practice in our API Playground.
6.2Exercises: MutationsThis document contains exercises to provide mutations practice in our API Playground.

#Lesson 7: Frontend connection

LessonNameContents
7.1Creating a frontend using NextYou will learn how to create your frontend for the getting started project using Next.
7.2Connecting our storefrontYou will learn how to connect our e-commerce storefront to our existing Hygraph project.
7.3Preview URLYou will learn how to configure the Preview URL feature. We'll use it to add a Preview button to the sidebar of our content creation screen.

#Lesson 8: Webhooks

LessonNameContents
8.1Configure webhooksYou will learn how to configure a webhook.

#Wrap-up

Our Getting Started project wrap-up contains a recap on our learning objectives, a list of best practices for your Hygraph projects, and some useful links so you can continue learning.

#Prerequisites for this tutorial

#Choose your path

Our starting point will be a cloned project where you will be able to choose your own adventure. We have two options for you:

  • Option 1: Clone and follow the complete Hygraph onboarding experience

    • This project clone includes Navigation, SEO models, and image assets.
    • You will build the Hygraph project by moving through the step-by-step learning path.
Select option 1
  • Option 2: Practice frontend implementation, queries, mutations

    • This project clone includes the complete Hygraph project with models, assets, and content entries.
    • You will receive a fully functioning project and learn how to connect Hygraph to a frontend implementation to practice queries and mutations in the API Playground.
Select option 2

#Cloning the project

Whether you select path 1 or 2, you will get a cloning screen similar to this one:

Clone project screenClone project screen

All you have to do is give it a name - one is provided but you can edit it - you can add a description, which is optional, use the dropdown to select a region for the clone, and click Clone now.

Cloning may take a couple of minutes, and after that you'll land on your project's dashboard.

Cloned project dashboardCloned project dashboard

#Next step

#If you chose option 1

#If you chose option 2

Your next step depends on what you want to do next!