February Developer Challenge - CAP Plugins: Week 2

[thomas_jung]

If you missed week 1, you can find all the details: here

Now that the challenge is complete: here is my sample solution: jung-thomas/dev-challenge-feb-2024: Developer Challenge February 2024 (github.com)

This week's challenge is going to build upon what we learned last week with the OData V2 plugin. We will continue working with the same project, but now we want to add support for GraphQL.

What is GraphQL?

GraphQL is a query language for APIs and a runtime for executing those queries by using a type system you define for your data. Unlike REST, which uses multiple URLs to access different resources, GraphQL accesses all the resources from a single endpoint with queries that articulate exactly what data is needed.

GraphQL and OData are both specifications for building and consuming APIs but take different approaches to some aspects.

GraphQL is a query language for APIs and a runtime for executing those queries by using a type system you define for your data.

OData defines a set of best practices for building and consuming RESTful APIs. It extends REST by providing a uniform way to describe both the data and the data model, enabling more detailed queries and interactions with the data.

How does this impact the SAP Cloud Application Programming Model?

The SAP Cloud Application Programming model was designed to be protocol agnostic as much as possible. While OData V4 is the default service type exposed by CAP applications; CAP was never intended to only support OData or just one version of that specification. Therefore its possible from a single model and service definition to support both OData and GraphQL even with the differences in approaches used by the two different protocols!

Your Task this week

Use the GraphQl Adapter plug-in to add GraphQL support to your project and to ONLY the CatalogService endpoint. And make sure that this same service also still supports OData V4 in parallel.

GraphQL Adapter: The GraphQL Adapter is a protocol adapter that generically generates a GraphQL schema for the models of an application and serves an endpoint that allows you to query your services using the GraphQL query language.

https://github.com/cap-js/graphql

To complete the challenge, post a screenshot from the graphql test tool (which can be accessed from /graphql url of your application) running a query against the ListOfBooks entity in the CatalogService. 

Bonus 1: The test tool doesn't automatically include a link to the GraphQL test tool. But using a server.js file we can use the on serving event to extend the CAP test tool ourselves. Your bonus challenge is to add the code to your project to expose a link in the test tool to the GraphQL page but only for the service endpoints that support GraphQL. Hint: Several of the samples in the SAP-Samples repository on GitHub perform this technique.

[qmacro]

For the bonus part:

 

[Kaustav]

GraphQl Query

Bonus

[kumarniti4]

Screenshots:

Bonus:

Thanks, @qmacro, for the additional hint. I was so close already but gave up. I tried again after seeing your hint and found the example.

[ajmaradiaga]

Adding GraphQL to service... 

[satya-dev]

I added and graphql adapter. 

[egenoves]

The GraphSql plugin:

[smok1]

Added GraphQL:

Bonus 1:

[Ruthiel]

I tried to add the GraphQL link unsuccessfully. 
Maybe something wrong with my server.js code.

[thomas_jung]

If you need a hint or help with the bonus feel free to direct message me here on the Community platform.

[Kaustav]

I need help on this as i am getting error 

[thomas_jung]

You need to write a query before executing. From your other post it looks like you got it. But if if still having problems, let us know.

[SandipAgarwalla]

GraphQL query

Bonus - WIP

[SandipAgarwalla]

Can't seem to get the bonus execise correct. Found the server.js, but does not work 🙄

[thomas_jung]

@SandipAgarwalla - if you want, direct message me on the Community Platform. I can help you with the troubleshooting or share my solution. It's only a couple of lines of code. 

[stickman_0x00]

Felt more like I was learning how to search github than understanding how it works adding the links 😕

[qmacro]

Searching GitHub is a good skill to master! There's so much great material on CAP and everything there, that being able to pinpoint something or fish out an example of how to do something that the one that can wield search effectively has an advantage over those that can't. Plus you need to recognise and sift through CAP code examples to find the solution, so that's CAP specific! 🙂

[stickman_0x00]

Can't argue with that and this time you guys did gave us enough tips to solve the problem 😋. In the mean time learned that how to do for the rest protocol too.

Continue keep bringing them!

[smok1]

I just debug the 'standard code', understand how the 'standard Cap index' page is constructed and did my own solution. Curious to find the SAP sample solution on GIT. 

[Raghu_150]

[qmacro]

If I may be so bold and offer a bit of a clue to those looking to complete the bonus part of this week's task. The search facility on GitHub is fantastic, and with the help of search modifiers, you can narrow in on what you're looking for with ease. 

The base search is at https://github.com/search and the query language includes parameters that allow you to specific the context of your search. For example, you might want to set the `org` to `SAP-samples` and the `type` to `code`, and perhaps the `path` to something else, while looking for the things that @thomas_jung hinted at in the bonus description 🙂

You should end up with a very specific URL that you can GET in your browser, and there are (at the time of writing) only two results, both of which have code that you can use.

Good luck! 

[NicholasB]

I must admit that it took me a while but this hint is pure gold. Thank you!

[MarcelFarkas]

graphql query:

bonus:

[NagaPrakashT]

[gu_marti_paulo87]

GraphQL query 

Bonus 1

[ruben_alvarez]

GraphQL

Bonus

[Cmdd]

GraphQL

... and the bonus part

Is it correct that the old rewriting rule (challenge #1) is not working anymore in this new scenario? I still see "Proxy rewrite rule created: "^/feb_devchallenge" ~> "/odata/v4" " in the output log but in the test tool the old name is exposed .

[thomas_jung]

Proxy rewrite rule?  Are you trying to change the main ODataV4 URL path? If so you can do that via annotation in the service definition now since CAP 7.0. June 2023 | CAPire (cloud.sap)

[Cmdd]

Yes! Sorry, I was trying to play with exposed path. Thanks for the hint 🙂 

[MeriemSouissi]

Hello,

Bonus : 

My repo : https://github.com/meriemsouissi/dev-challenge-feb-2024

Thanks @thomas_jung  for this bonus ! 

[thayrapedroso]

[NicholasB]

GraphQL query

Bonus:

(this was hard! was only able to add it to web apps w/o any hint..)

[DenisGaland]

[Alpesa1990]

Bonus

[govardhansahil]

[MatLakaemper]

[jens_borau]

 

[Jarek]

[brunonalon]

• Bonus1

[tobiasz_h]

Hello,