Using GraphQL with the WIP API
Tags: graphql, wip
Published: 2019-06-15 15:51:32

---
title: Using GraphQL with the WIP API
published: true
description: 
tags: graphql,wip
---

WIP ([https://wip.chat/](https://wip.chat/)) is a community of makers started by [Marc Köhlbrugge](https://wip.chat/@marckohlbrugge/). Recently I dug into its GraphQL API to check out the capabilities. Below you'll find my notes.

After signing up you can go [this page](https://wip.chat/api) which displays your private API key.

Let's start by requesting your own account profile.

Two headers must be set:

* `Authorization: bearer YOUR-PRIVATE-API-KEY`
* `Content-Type: application/json`

The API endpoint is [https://wip.chat/graphql](https://wip.chat/graphql).

Send the following query to obtain your account profile data:

```
{
  viewer {
    id
    url
    username
    first_name
    last_name
    avatar_url
    best_streak
    completed_todos_count
    products {
      name
      todos {
        body
      }
    }
    todos {
      body
    }
    streaking
  }
}
```

Notice the use of `viewer`. You'll see this often in GraphQL APIs. It refers to the authenticated user.  It's not an actual GraphQL specification but rather a [practice](https://medium.com/the-graphqlhub/graphql-and-authentication-b73aed34bbeb) which originated at Facebook (just as GraphQL).

The WIP API uses `viewer` to return data associated to the authenticated and authorized API user.

The result looks like this:

```
{
  "data": {
    "viewer": {
      "id": "1377",
      "url": "https://wip.chat/@realhackteck",
      "username": "realhackteck",
      "first_name": "Erik",
      "last_name": "van Eykelen",
      "avatar_url": "https://wip.imgix.net/store/user/1377/avatar/5c9fae4c0cd2343c8a86edbf822825b4.jpg?ixlib=rb-1.2.2&w=64&h=64&fit=crop&s=6c4e9eb0dd3b1679c34b056ad532d05b",
      "best_streak": 0,
      "completed_todos_count": 0,
      "products": [
        {
          "name": "Wip.Chat API test",
          "todos": []
        }
      ],
      "todos": [],
      "streaking": false
    }
  }
}
```

Note: replacing `viewer` by `user(username: "realhackteck")` will return the same data.

One of the cool things about GraphQL is its ability to provide introspection:

![Insomnia](https://user-images.githubusercontent.com/11846/59552940-b321ac80-8f8d-11e9-9373-fe70b70bc609.png)

The screenshot shows the [Insomnia](https://insomnia.rest/) client which I use a lot to run tests against APIs. The popup with the orange-colored Gs shows attributes which belong to the `Todo` object. Insomnia is able to display these attributes by querying the GraphQL schema. [This article](https://graphql.org/learn/introspection/) explains how introspection works.

The next step is to create something using the API. The following example shows how you can create a WIP todo including an attachment. Three steps are needed to accomplish this.

## Step 1

Generate a pre-signed URL which you can use to upload an attachment:

```
mutation createPresignedUrl {
  createPresignedUrl(input: {filename: "foobar.jpg"}) {
    fields
    headers
    method
    url
  }
}
```

The result looks like this:

```
{
  "data": {
    "createPresignedUrl": {
      "fields": "{\"key\":\"cache/c79b...7fe0.jpg\",\"Content-Type\":\"image/jpeg\",\"policy\":\"eyJl...fQ==\",\"x-amz-credential\":\"AKIA...HQKQ/20190615/us-east-1/s3/aws4_request\",\"x-amz-algorithm\":\"AWS4-HMAC-SHA256\",\"x-amz-date\":\"20190615T150217Z\",\"x-amz-signature\":\"497b...13df\"}",
      "headers": "{}",
      "method": "post",
      "url": "https://s3.amazonaws.com/assets.wip.chat"
    }
  }
}
```

## Step 2

Use the previous result to upload the attachment to AWS S3:

```
curl -F "key=cache/c79b...7fe0.jpg" \
     -F "Content-Type=image/jpeg" \
     -F "Policy=eyJl...fQ==" \
     -F "x-amz-credential=AKIA...HQKQ/20190601/us-east-1/s3/aws4_request" \
     -F "x-amz-algorithm=AWS4-HMAC-SHA256" \
     -F "x-amz-date=20190615T150217Z" \
     -F "x-amz-signature=497b...13df" \
     -F "file=@foobar.jpg" \
     https://s3.amazonaws.com/assets.wip.chat
```

## Step 3

Send a [mutation](https://graphql.org/learn/queries/) request to the GraphQL API:

```
mutation createTodo {
  createTodo(input: {body: "This todo has an attachment", attachments: [{key: "cache/c79b...7fe0.jpg", filename: "foobar.jpg", size: 1001}]}) {
    id
    body
    user {
      first_name
      last_name
    }
  }
}
```

The result looks like this:

```
{
  "data": {
    "createTodo": {
      "id": "117462",
      "body": "This todo has an attachment",
      "user": {
        "first_name": "Erik",
        "last_name": "van Eykelen"
      }
    }
  }
}
```

Check out [https://wip.chat/graphiql](https://wip.chat/graphiql) if you're interested to know what you can do with the WIP API. This page runs GraphiQL which is a graphical in-browser IDE. Check out [https://github.com/graphql/graphiql](https://github.com/graphql/graphiql) for more information.

This was originally published at https://www.msgtrail.com/articles/20190615-1735-using-graphql-with-the-wip-api/