Embedded Files
Some context for its growing role in Data Commons projects can be found at https://beta.observablehq.com/@jonasalmeida/graphql. The hands-on practicum proposed for this session is to follow the tutorial at http://graphql.org/graphql-js.
The discussion of the emergence of GraphQL as the leading mediator of Backend-as-a-service (BaaS) for Biomedical Data Commons will be postponed to another session after we have a good handle on its core functionalities. There are many webcasted lectures on using GraphQL as a general purpose BaaS that will help prepare that conversation, such as 15 mins YouTube. For an in-depth recent review by GraphQL's own creators see this presentation at OpenStack.
A number of Cloud hosted BaaS are available with free tiers big enough to explore the ancillary services such as OAUTH. If we finish the tutorial ahead of time, let's have a look at scaphold.io. For an example of writing a node microservice that exposes a graphql endpoint see zero to graphql in 30 mins.
Tutorial
Tutorial
Follow http://graphql.org/graphql-js step by step. For the devtools example use this slightly modified code:
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("POST", "/graphql");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Accept", "application/json");
xhr.onload = function () {
res = xhr.response;
console.log('data returned as "res":', xhr.response);
}
xhr.send(JSON.stringify({query: "{ hello }"}));
We'll also play a modified version of their server.js
var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');
var cors = require('cors');
// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
type Query {
hello: String
}
`);
// The root provides a resolver function for each API endpoint
var root = {
hello: () => {
return 'Hello world!';
},
};
var app = express();
// CORS
app.use(cors());
// graphql middle layer
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');
and with developing Apps calling that server.js using a gql function:
gql=function(q,url){
url = url||'http://localhost:4000/graphql' // default is the tutorial server as per http://graphql.org/graphql-js
q = q||'{"query":"{ hello }"}' // tutorial hellp world query
return new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Accept", "application/json");
xhr.onload = _=>{resolve(xhr.response)}
xhr.onerror = _=>{reject(xhr)}
xhr.send(q)
})
}
How it all looks like in the end at localhost:4000/graphql:
Keywords/People
- Back-end as a service
- GraphQL
- Schema.org (meta data service)
- Roy Fielding - Wrote PHD paper on REST
- Keith A. Baggerly, PhD
Report abuse