You can use the doc explorer to dig around and learn your API. Your GraphQL queries will mirror the structure of the types shown here so remember you can always come back here if you get lost. You can also click the </> tag to have generate the full text of a query. This can really help learning the language when you first start.

Before we move on let’s create a TodoList as well.

# Query Editor

mutation CreateTodoList($input: CreateTodoListInput!) {

createTodoList(input: $input) {

changedTodoList {

id

name

todos {

edges {

node {

id

title

}

}

}

members {

edges {

node {

id

username

}

}

}

}

}

} # Variables Editor

{

"input": {

"name": "Build an awesome app on Scaphold"

}

}

Click send. You should notice that your TodoList doesn’t yet have any members or todos. First, copy the id of the TodoList you just created, we’re going to need it in a second. If you remember, members is a many-to-many connection with User. When you specify a field as a many-to-many connection, Scaphold creates two mutations for manipulating the edges between objects in the connection. Look for the mutation addUserToTodoListMembers. Here’s where we’ll use the User id and TodoList id of the objects we just created. Use the following query to add our user ‘John Doe’ to the TodoList’s members.

# Type this in the query editor

mutation AddMember($input: addToTodoListMembersConnectionInput!) {

addToTodoListMembersConnection(input: $input) {

changedUser {

id

username

}

changedTodoList {

id

name

}

}

} # With variables

{

"input": {

"userId": "<your user id>",

"todoListId": "<your new todo list id>"

}

}

If you forgot to save your User id or TodoList id, you can easily grab it from the explorer tab. Let’s verify that our user was added to the TodoList’s members.

# Query your todo list

query getTodoListQuery{

getTodoList(id: "<todo list id>"){

id

createdAt

modifiedAt

name

members {

edges {

node {

id

username

}

}

}

}

}

Cool! We now have a TodoList and have subscribed our User as a member.

Step 4: Integrate Slack

Thus far we have defined a schema, added custom permissions, and created data points but to really build a productive todo app we’ve gotta do a little more. We’re going to integrate Slack so that we can get notifications in our favorite communication tool whenever a new Todo is created.

Jump over to the Integrations tab and add the Slack integration. To integrate slack, go to Slack’s webhooks portal and configure an incoming webhook for our app.

After you have done this, copy and paste the URL for your webhook into the add integration modal on Scaphold.

We are going to bind our slack integration to the ‘afterCreate’ event on the type Todo. Adding this type of event will tell our Scaphold API to fire our slack integration whenever a Todo item is created. To configure what info is included in the message to Slack we will give a GraphQL fragment that will be applied to the new created Todo value before posting to slack. Say for example, we wanted to know the title, content, the name it’s parent list, and the name of the task’s owner. We would give the following GraphQL fragment for our integration.

{

title

content

owner {

username

}

list {

name

}

}

You can write any GraphQL expression for the fragment just make sure you include the outermost brackets.

Step 5: Create a Todo and test our Slack integration

Let’s try out our new Slack integration! Go back to GraphiQL. Let’s go ahead and create a Todo item. Type the following query into the query tab in GraphiQL.

mutation CreateTodoQuery($input: _CreateTodoInput!) {

createTodo(input: $input) {

changedTodo {

id

createdAt

modifiedAt

owner {

id

username

createdAt

modifiedAt

lastLogin

}

}

}

}

Remember those two ids I asked you to save earlier. We’re going to use them again here. If you forgot to save them, you can easily grab them from the ‘Explorer’ tab. Enter the following in the variables tab

{

"input": {

"title" : "Build a sweet on using my new GraphQL API",

"content": "Check out these tutorials on how to get started with React, React Native, and Angular 2.0",

"ownerId": "<John Doe's user id>",

"listId": "<Todolist id>"

}

}

If everything went to plan, you should have just gotten a notification sent to the slack channel you configured in the incoming webhook containing the information we designated in our GraphQL fragment. We also just added a Todo to our TodoList and specified John Doe as the owner! Check it out!

# Query

query {

getUser(id: "<John Doe's ID>") {

id

username

todoLists {

edges {

cursor

node {

id

name

todos {

edges {

cursor

node {

id

title

content

}

}

}

}

}

}

}

} # Response

{

"data": {

"getUser": {

"id": "<User ID>",

"username": "John Doe",

"todoLists": {

"edges": [

{

"cursor": "d5e41e91-0aad-4e3b-8e1c-20744bf8c515",

"node": {

"id": "<TodoList ID>",

"name": "Build an awesome app on Scaphold",

"todos": {

"edges": [

{

"cursor": "d1502ab3-cc3a-48fc-b7fe-0b2df12c0922",

"node": {

"id": "<Todo ID>",

"title": "Build a sweet on using my new GraphQL API",

"content": "Check out our next tutorials on how to get started with React, React Native, and Angular 2.0"

}

}

]

}

}

}

]

}

}

}

}

A quick comment on Connections

Connections standardize a way to paginate through large sets of objects. To do this, your Scaphold API wraps connected objects in an Edge and each of these edges has an associated cursor. You can use this cursor to grab the next page of objects in a connection. For example, if our user had a lot of TodoLists of which he/she was a member, you could grab the next 5 TodoLists with this query:

# Grab the next five TodoLists after the previous page.

query {

getUser(id: "<John Doe's ID>") {

id

username

todoLists(first: 5, after: "d5e41e91-0aad-4e3b-8e1c-20744bf8c515") {

edges {

cursor

node {

id

name

todos {

edges {

cursor

node {

id

title

content

}

}

}

}

}

}

}

}

For now this will not return any excess TodoLists because we have only created 1, but this technique works for all Connection fields. You can also paginate backwards using the last and before Connection parameters.

Closing thoughts

Congratulations, you did it! You now have a powerful GraphQL API that you can use to power your client apps! Let’s take a quick look back at what we just did: