[Docs] Add docs for exposing GraphQL APIs

[dhmlau]

Description / Steps to reproduce / Feature proposal

Currently user can do the following steps to create GraphQL APIs within a LoopBack app:

1. Run npm i --save express express-graphql oasgraph
2. Make sure the LB app has started.
3. From the browser, go to http://localhost:3000/openapi.json, copy the openapi.json, and save it under the root of the LoopBack application, say todo-openapi.json
4. Run ./node_modules/.bin/oasgraph todo-openapi.json
5. Test it by going to http://localhost:3001/graphql

Acceptance Criteria

• Determine where to put the docs.
  • Perhaps as one of the tutorials in https://loopback.io/doc/en/lb4/Examples-and-tutorials.html
• Create the docs page with the above steps
  • Verify the steps first as things might've changed by the time of writing.

[marioestradarosa]

create GraphQL APIs

For what I understood, please correct me, it can only expose GraphQL Schemas from the OpenAPI spec file, but it won't create any API implementation, I think the term here is resolve to the original API? If this is correct ,then I think you should change the title, otherwise, ignore this message

Never mind 😄 , I figured it out by doing a POC today. OasGraph exposes the GraphQL schema but with the server parameter in the openapi.json it will resolve to the loopback 4 application. More over, I am going to work with an example for stitching more than one loopback4 app in the same openapi.json to see how it works 👍

[marioestradarosa]

@dhmlau , Here is my summary for this weekend. I played with OASGraph as a library and wrote this small presentation. We need to check what to add/remove etc. I see a potential way to mount the /graphql using the internal express. So, the developer can configure the option if he/she wants a graphql server , something like { graphql : { available: true, mountPoint: '/graphql' } } passing this to the application, the internal express can be used to create it using oasgraph as the translator.

At this moment, I just played with the two dependencies and could manage to make a working loopback 4 application with no problems. I think the only problem at this moment is the the Delete operation not being sent the correct format to OASGraph, I will open an issue on this, aside from that I could test the relationships on the todo-list querying them and works fine.

Here is a small video presentation summarizing my findings this weekend. Note that the current oasgraph CLI is only used to test an openapi.json spec file, this won't work in production, probably the best way is to use the mechanism I placed on the video, this way, I didn't have to install the oasgraph CLI or run npm link etc.

https://www.youtube.com/watch?v=s2hScucNmaA

[marioestradarosa]

@dhmlau do you still want to place an area in LB4 documentation about this integration?

[dhmlau]

@marioestradarosa , yes, but I haven't given too much thought on where it should be. :) Any suggestion?
FYI - As part of the QuickLab/workshop for Node+JS Interactive (soon will be available in IBM Developer web site), we've adding that instruction on top of the todo tutorial.

[marioestradarosa]

@dhmlau , it make sense to place it in the Examples and Tutorials before/after the Deploying to IBM Cloud section.

thoughts?

[dhmlau]

sure. sounds good.