GraphCMS Quickstart Guide

This short guide is aimed at new users and will walk through creating a project, schema, content, publishing and querying via GraphQL. You'll need an account to get started, sign in or create a new account.

1. Create a Project

Once logged in, you will see a list of any projects you create or have been invited to.

1. First, select "Create a new project" to create your first project.
2. Next, give your project a name, and pick a region for where you want content to be located.
3. Now pick an applicable plan for your needs. The free plan will work with steps outlined in this guide.

2. Create a Model

From the sidebar, navigate to the Schema editor.

Now, Add a new Model called Product, keeping the default API ID and Plural API ID intact.

We now have a Product model within our GraphQL schema. This is often thought of as a database "table" or "collection" in NoSQL.

3. Add Fields

We will now add some fields to our Product model for a product name, price and image. To add a field, select one of the field types from the right side of the schema editor.

3.1: Create a Name field

Select Single line text from the available types and set the Display Name to Name, and mark the field as required.

3.2 Create a Price field

Next, select Integer from the available types and set the Display Name to Price, and mark the field as required.

3.3 Create an Image field

For product images, we can take advantage of the Asset model. Creating an Image field using Asset will create a relation between the two models.

Select Asset Picker from the available types and set the Display Name to Image, and allow multiple values.

Your Product model should now look a little something like the following.

4. Create a Product (Content Entry)

We will now add some content to our Product model. To add a product, using the sidebar, navigate to the content editor.

Select Product from the list of models on the left.

Click Create New from top right to create your first content piece.

Give the Product a Name and Price.

Next, upload one or more images by clicking Add assets and then Upload inside the modal.

Pick any image(s) from your computer, or social network account to upload.

Once uploaded, your content entry should look a little something like this.

5. Save and/or Publish

Once content has been written, or updated, it's important to save or publish any changes.

By default, all content that you create will be have the a stage field, set to DRAFT.

Once you publish content, a copy is then made for the PUBLISHED stage. Drafts can be thought of as the master copy of content, where you can then push to the PUBLISHED stage.

6. Query content

GraphCMS provides a built-in API Playground to query and mutate content across your project.

From the sidebar, select API Playground. It's here where we will run the queries below.

Let's begin by querying for all products, regardless of their published state.

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

If you want to return DRAFT products only, then we can pass an argument to the products query.

{
  products(stage: DRAFT) {
    name
    price
    image {
      url
      fileName
    }
  }
}

7. Open the API

Navigate to your settings panel and enable access to your API. You can either enable full public access to your API or protect your API with permanent auth tokens.

Now that the API is public, let's test it. Copy your project's API endpoint and paste it in your URL bar for your browser.

In the GraphQL playground, run the queries above once more. These are now publicly accessible on the web!