Create Graphcool Project

Once you're logged in you'll have access to the Console UI. An example project will already be created for you.

Let's create a new project. Select the down arrow next to the name of the example project (top left) and click on the + sign to add your project. I've named mine "Shopping List", but it doesn't really matter what you name it.

In the bottom left corner click on the ENDPOINTS button. You'll see different types of endpoints for your Graphcool backend. We will use the Simple endpoint and the Subscriptions endpoint when we build our Ionic app.

Define Schema

Initially, the schema will always have a User type for authentication and a File type for file management. We'll ignore these for now and add the following types for our application.

As you can see, we can specify the types of the fields. If the type is followed by an exclamation mark, it means that the field is required (non-nullable). For more information on which types you can use, check out the docs.

The id field is of type ID, is a unique 25-character string, and will be automatically generated when a new Item or Category is created.

Click on the Preview Changes button to validate the schema changes and then click Apply Changes.

As you can see the types have been changed to implement Node and 2 new fields are added automatically: createdAt and updatedAt.

Queries and Mutations

We can use the Playground to try querying and mutating data. Click on the Playground button in the bottom left corner.

The Playground editor helps us out with auto-complete based on the schema we've just created.

Let's try adding a Category. We'll use the createCategory mutation which was automatically generated when we created the type Category.

mutation {
createCategory (
name: "Groceries") {
id
}
}

This mutation adds a new Category with the name "Groceries". With any mutation, we can specify which fields we want to send back as return values. In this case, we're returning the generated id for the new Category.

Click on the big play button in the middle and you should get an output similar to the one below.

Now let's switch to the Playground again and add an Item to the Category we created before. We'll use the generated createItem mutation now. We can link the Item to the Category by sending the categoryId.

Customizing Queries and Mutations

The queries and mutations we've used are all automatically generated, but you can also create your own custom queries and mutations. I'm not going to cover that in this tutorial but you can read all about it in the API documentation.

What's next?

We're done with the backend for now. We've set up our schema, we know how to write queries and mutations and we have the endpoint to send our queries to.

In the next part, we'll build the views for our Ionic app and use Apollo Client to connect to the Graphcool backend.