This document explains how to integrate LoopBack 4 with OASGraph to quickly create GraphQL interfaces from OpenAPI specifications. It provides step-by-step installation and coding instructions, including setting up dependencies, modifying source files, and starting the server. The end result allows users to access a GraphQL server interface through the specified endpoint.

1. LoopBack4 and OASGraph
GraphQL in minutes!
By Mario Estrada
marioestradarosa@gmail.com

2. What is OASGraph?
Turns APIs described by OpenAPI specifications (OAS) into GraphQL
interfaces.
https://github.com/strongloop/oasgraph
What is LoopBack 4?
LoopBack 4 makes it easy to build modern applications that require
complex integrations.
• Fast, small, powerful, extensible core
• Generate real APIs with a single command
• Define your data and endpoints with OpenAPI
https://github.com/strongloop/loopback-next

3. Loopback 4 High Level Overview
LoopBack 4
DB
SOAP
REST
Open API specification
{ REST SERVER }
REST

4. OasGraph Integration Overview
LoopBack 4
OASGraph Library
Open API
Specification
GraphQL Schema
Express-graphql
REST
GraphQL

5. Let’s code !

6. INSTALLING LOOPBACK4
npm install -g @loopback/cli

7. Generating todo-list example
lb4 example todo-list

8. INSTALL OASGRAPH DEPENDENCY
npm install oasgraph —save
cd loopback4-example-todo-list
npm install express-graphql —save

9. Modify src/application.ts
options = Object.assign({}, {
rest: {
openApiSpec: {
servers: [{url:'http://localhost:3000'}],
}
}
});
Add the following code before the super(options);
This will help OASGraph determine the URL for the resolver(s).

10. At runtime the OpenApi Spec parameter
OpenAPI Spec
options = Object.assign({}, {
rest: {
openApiSpec: {
servers: [{url:'http://
localhost:3000'}],
}
}
});
GraphQL Schema
"servers": [
{
"url": "http://localhost:3000/"
}
],
Resolver URL

11. Modify src/index.ts
Import dependencies
This will make the the express, express-graphql and oasgraph available.
const OASGraph = require('oasgraph');
const express = require('express');
const graphqlHTTP = require('express-graphql');

12. Modify src/index.ts
Create the Schema Object
Note that we are using the method getApiSpec from the LoopBack 4 rest server. This is the
magic, the OASGraph.createGraphQlSchema is converting it to a GraphQL Schema
automatically and accurately.
const {schema} = await
OASGraph.createGraphQlSchema(
app.restServer.getApiSpec(),
{
strict: false,
viewer: true,
addSubOperations: true,
sendOAuthTokeninQuery: false,
},
);
Note: This code will be wrapped inside a try/catch. And starts after line console.log(`Try ${url}/ping`);
LoopBack 4
OASGraph Library
Open API
Specification

13. Modify src/index.ts
Starts the GraphQL Server
With the GraphQL schema generated already, it is just a matter of starting the GraphQL
server in a specific port, in this case, we are using port 3001.
const myExpress = express();
myExpress.use('/graphql', graphqlHTTP(
{
schema: schema,
graphiql: true,
}
));
myExpress.listen(3001, () => {
console.log('OASGraph ready at http://localhost:3001/graphql');
});
Note: This code will be wrapped inside a try/catch.
OASGraph Library
GraphQL Schema
Express-graphql

14. Full code
src/index.ts
The following code, should placed after rest server has been initiated.
try {
const {schema} = await OASGraph.createGraphQlSchema(
app.restServer.getApiSpec(),
{
strict: false,
viewer: true,
addSubOperations: true,
sendOAuthTokeninQuery: false,
},
);
const myExpress = express();
myExpress.use('/graphql', graphqlHTTP({schema: schema, graphiql: true}));
myExpress.listen(3001, () => {
console.log('OASGraph ready at http://localhost:3001/graphql');
});
} catch (err) {
console.log('Error: ', err.message);
}
return app;
}

15. Now run the application
npm start
> node .
Server is running at http://[::1]:3000
OASGraph ready at http://localhost:3001/graphql
End point for GraphQL Server

16. Use GraphiQL tool
Open in browser at http://localhost:3001/graphql

17. GraphiQL Tool
http://localhost:3001/graphql

18. Thank you !
Visit http://v4.loopback.io