Let’s prototype a GraphQL API with Zero code
Tags: graphql, productivity, node, javascript
Published: 2020-07-07 10:28:12

**Your Profile** : Frontend developer 

**Problem** : Your company is developing a Trello clone to augment its existing product line

**Features** 
- Develop a new Trello-like schema functionality
- Use existing user base as members for the functionality

**Technical**
- A GraphQL API with schema agreed with the backend developers
- Use whatever frontend you fancy
 
**Blockers**
- The backend API is not ready yet but you want to crack on with the UI bits  
- You can get a small dump of existing user data as a JSON file 

**Solution**: You want to mock the schema with minimal potential changes to your UI code in the future. [graphql-sample](https://github.com/sayjava/graphql-sample) can help solve that problem. graphql-sample is a GraphQL sample data server that can generate mock data for a given schema and a simple CRUD API with zero code.

We shall use [graphql-sample](https://github.com/sayjava/graphql-sample) to aid us in prototyping the API before backend API is ready. 

Here is the agreed entity relationship as agreed in the tech sessions with the stake holders

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y89nbnvrwexjd5nl51xu.png)

Lets create a folder called `trello`

```sh
mkdir trello
cd trello
```

and create a file called `schema.graphql` in the `trello` folder

```sh
touch schema.graphql
```

Let’s load the users information first. [graphql-sample](https://github.com/sayjava/graphql-sample) auto loads any CSV and JSON files in the same directory and can then be referenced from the schema. 

Let's copy the [users.json](https://github.com/sayjava/graphql-sample/blob/master/examples/trello/users.json) file into the `trello` folder. A sample user looks like 

```json
{
    "UserId": 1,
    "FirstName": "Luís",
    "LastName": "Gonçalves",
    "Email": "luisg@embraer.com.br"
}
``` 
and we can easily map that to our GraphQL schema like this

```graphql
type Member @datasource(name: "users") {
  userid: Int @unique @named(as: "UserId")
  name: String @named(as: "FirstName")
  email: String @named(as: "Email")
}
```

Let’s test our new schema by Firing up [graphql-sample](https://github.com/sayjava/graphql-sample) in the trello folder. This will start a server on localhost on port 8080

```sh
npx graphql-sample
```

now visit http://localhost:8080/graphql to see the playground or you can use `http://localhost:8080/graphql` in your application code to make direct POST requests. 

Now we can run an initial query to fetch some users

```graphql

query sampleMembers {
findMembers(limit: 2) {
   name
   email
 }
}
```

and we should see some user data already coming through 

Now onto modelling our Board and attaching it to our members

```graphql

type Member @datasource(name: "users") {
  userid: Int @unique @named(as: "UserId")
  name: String @named(as: "FirstName")
  email: String @named(as: "Email")
  
  # create a relationship between a member and their boards
  boards: [Board] @relation
}

type Board {
  id: ID
  name: String @named(as: "lorem_word")
  
  # create a relationship between a board and it's owner
  owner: Member @relation
}
```

Now we can query boards and see it's owner

```graphql
query someBoards {
 findBoards(limit: 3) {
    name
    owner {
      name
    }
  }
}
```

or query a member and retrieve the boards they have created

```graphql
query myBoards {
  findMembers(where: {email:{eq:"luisg@embraer.com.br"}}) {
    boards {
      name
    }
  } 
}
```

Now lets create some board memberships. Since boards can have members who are not owners

```graphql 
type Member @datasource(name: "users") {
  userid: Int @unique @named(as: "UserId")
  name: String @named(as: "FirstName")
  email: String @named(as: "Email")

  boards: [Board] @relation
  memberships: [BoardMembership] @relation
}

type Board {
  id: ID
  name: String @named(as: "lorem_word")
  owner: Member @relation
  members: [BoardMembership] @relation
}

type BoardMembership {
  id: ID
  board: Board @relation
  member: Member @relation
  created_at: String @named(as: "date_recent")
}
```

Now we can query board memberships

```graphql
query myBoards {
  findMembers(where: { email:{ eq: "luisg@embraer.com.br" }}) 
 {
    boards {
      name
    }
    
    memberships {
      board {
        name
      }
    }
  } 
}
```

and we can continue to build up the API as we build UI.

see the [full schema here](https://github.com/sayjava/graphql-sample/tree/master/examples/trello)

`graphql-sample` generates a full CRUD API, so you can create new boards like this

```graphql
mutation {
  createBoards(data: [
    {
      id: 1020,
      name: "Sample Board",
      limitations: [
        {
          id: 2,
          type:board
          status: warn
          disableAt: 233
          warnAt: 400
        }
      ]
    }
  ]) {
    boards {
      name
      limitations {
        status
      }
    }
  }
}

``` 


Wonderful, now as a frontend developer, you can now carry on developing your UI before the backend APIs are ready.A simple modification might be required to the schema/operations before you go into production but that should be minor. 

Hope this was a useful exercise. 

[Disclaimer] I am the author of `graphql-sample`