[GraphQL] Deploy a GraphQL dev playground with graphql-up

Posted 2020-09-18 Answer1215

In this lesson we‘ll use a simple GraphQL IDL schema to deploy and explore a fully functional GraphQL service in minutes with graphql-up.

 

Install:

npm i -g graphql-up -g

 

Create schema:

type Person {
    id: ID!,
    name: String!,
    tasks: [Task!]! @relation(name: "PersonTask")
}

type Task {
    id: ID!,
    description: String!
    person: Person @relation(name: "PersonTask")
}

 

Run:

graphql-up tasks.schema

 

It will generate two url for use, just grap one. It will open graphcool.

 

We can query the data:

{
    allPersons {
    id,
    name,
    tasks {
      id,
      description
    }
  }
}

We won‘t get any, because we haven‘t create anything.

 

Create some mock data:

mutation {
  createPerson(name:"Zhentian") {
    id,
    name
  }
}

// get back
  "data": {
    "createPerson": {
      "id": "cj2t31akybh3g01184klolj0t",
      "name": "Zhentian"
    }
  }
}

 

Now if query again:

{
  allPersons {
    id,
    name,
    tasks {
      id,
      description
    }
  }
}

// get back

  "data": {
    "allPersons": [
      {
        "id": "cj2t31akybh3g01184klolj0t",
        "name": "Zhentian",
        "tasks": []
      }
    ]
  }
}

 

Create data for task:

mutation {
  createTask(description: "Learn GraphQL", personId: "cj2t31akybh3g01184klolj0t") {
    id,
    description
  }
}

// get back
  "data": {
    "createTask": {
      "id": "cj2t37fo7kizn0102kf9otzh5",
      "description": "Learn GraphQL"
    }
  }
}

 

When we do the query again:

{
  allPersons {
    id,
    name,
    tasks {
      id,
      description
    }
  }
}

// get back

  "data": {
    "allPersons": [
      {
        "id": "cj2t31akybh3g01184klolj0t",
        "name": "Zhentian",
        "tasks": [
          {
            "id": "cj2t37fo7kizn0102kf9otzh5",
            "description": "Learn GraphQL"
          }
        ]
      }
    ]
  }
}

 

Create Task and Person in same mutation:

mutation {
  createPerson(name:"Wan", tasks:[
    {description: "Learn Recompose"},
    {description: "Learn SCSS"}
  ]) {
    id,
    name
  }
}

 

After done with playground, can click "Generate code". Select Node env:

Install:

npm install lokka lokka-transport-http --save

Copy the code to index.js file, we should be able to run the code and get data back.