Let’s prototype a GraphQL API with Zero code

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 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 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

Lets create a folder called trello

mkdir trello
cd trello

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

touch schema.graphql

Let’s load the users information first. 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 file into the trello folder. A sample user looks like

{
    "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

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 in the trello folder. This will start a server on localhost on port 8080

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

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

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

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

or query a member and retrieve the boards they have created

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

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

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

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

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