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.

Jamie Barton
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 ProjectAnchor

Once logged in, you will see a list of any projects you created 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 all steps outlined in this guide.

2. Create a ModelAnchor

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.

Create Product Model

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 FieldsAnchor

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 fieldAnchor

Select Single line text from the available types and set the Display name to Name, and check the Make field required field in the VALIDATIONS tab. Click the Create button.

3.2 Create a Price fieldAnchor

Next, select Number from the available types under INTEGER and set the Display Name to Price, and check the Make field required field in the VALIDATIONS tab. Click the Create button.

3.3 Create an Image fieldAnchor

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.

Assets are a core feature in GraphCMS and the assets model is added to every new project by default.

Select Asset Picker from the available types under ASSET and set the Display Name to Image, and check allow multiple values. Click the Create button.


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

Product Model

4. Create a Product (Content Entry)Anchor

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.

Once content is added, entries will appear in the table view where you can filter, and paginate your content to find what you're looking for to edit.

Click + Create item from top right to create your first piece of content.

Give the Product a Name and Price.

Name and Price were to set to required in the schema, so the UI here reflects those constraints. Image allows multiple images to be uploaded since we allowed multiple values in the schema.

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.

Product Content

5. Save and/or PublishAnchor

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

By default, all content that you create will have the Stages 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 once edits are ready to be published.

Content can be queried in the API Playground using the stage which represents either Draft or Published state.

6. Query contentAnchor

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 query below.

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

7. Open the APIAnchor

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.

The default stage for the Public Content API is set to Published. To create the new permissions click the Yes, initialize defaults button in the Content API Permissions section.

Project API Permissions

This will set Read permission on all models on stage Published.

Project default API Permissions

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

Project Endpoint

In the API playground, run the query above once more. This is now publicly accessible on the web!

GraphiQL Public API query


  • Jamie Barton
  • Scott Spence
  • Previous
  • Next

Related articles

It's Easy To Get Started

GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or request a demo to discuss larger projects with more complex needs