首页 > 代码库 > [GraphQL] Deploy a GraphQL dev playground with graphql-up

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

2024-09-23 01:50:23   218人阅读

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.

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


联系
我们