Skip to content

Commit

Permalink
added API augmentation section
Browse files Browse the repository at this point in the history
  • Loading branch information
sigdestad committed Feb 9, 2024
1 parent 7824548 commit b4971f1
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 9 deletions.
75 changes: 73 additions & 2 deletions docs/api.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,77 @@ image::morgan-original.png["The original version of Morgan Freemans photo is wid

NOTE: The red "autofocus" circle, when set, helps the image service to crop the images optimally - as you can see above.

== One final step
== API augmentation

Knowing how headless a CMS can get with an API calle Guillotine, and GraphQL queries flowing from your fingertips. It's time for the big finale where you <<deploy#, deploy your app to the Enonic cloud>>.
Now the real magic begins! You programmatically augment and extend the Guillotine API. The use-cases are limitless, but rather than babbling about it - why not try it out yourself?

We'll keep it simple. In the next steps you'll add a new `age` field to the Person content type, and use the `dateofbirth` to calculate the persons age.

. From the `samples/` folder of your app, *copy or move* the `guillotine/` folder to `src/main/resources/`. You should then have the following TypeScript controller ready:
+
./src/main/resources/guillotine/guillotine.ts
[source,TypeScript]
----
include::{sourcedir}/samples/guillotine/guillotine.ts[]
----
+
. Guillotine requires the app to be redeployed (or restarted) in order to pick up changes to schemas and/or controllers. Stop the build (using control-c) and start it again:
+
^c
enonic dev
+
. Back in Query Playground, run the following query:
+
.Query using the new field
[source,GraphQL]
----
{
guillotine {
getChildren(key: "/persons", first: 2) {
displayName
... on com_example_myapp_Person {
data {
age
dateofbirth
}
}
}
}
}
----
+
The response should now contain a new age filed, with a calculated value:
+
.Query response
[source,JSON]
----
{
"data": {
"guillotine": {
"getChildren": [
{
"displayName": "Léa Seydoux",
"data": {
"age": 38,
"dateofbirth": "1985-07-01"
}
},
{
"displayName": "Jeffrey Wright",
"data": {
"age": 58,
"dateofbirth": "1965-12-07"
}
}
]
}
}
}
----


As you have now seen, XP lets you run server-side https://developer.enonic.com/docs/xp/stable/framework[TypeScript and JavaScript code]. API augmentation is just the tip of the iceberg - believe us.

== One last thing

With GraphQL queries flowing from your fingertips. It's time for the big finale where you <<deploy#, deploy your app to the Enonic cloud>>.
13 changes: 6 additions & 7 deletions docs/app.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -67,18 +67,17 @@ Assuming `mysandbox` is still running in another Terminal window, run these comm
cd myapp
enonic dev

The last command will build and deploy the app to `mysandbox` - then keep watching for changes in the code to automatically rebuild as you work on it.
The last command will build and deploy the app to `mysandbox`.

[NOTE]
====
Look for the following output to verify that the app has been built:
===
The initial build may take a while to setup, look for these lines to confirm it has completed

BUILD SUCCESSFUL in 6s
3 actionable tasks: 3 executed
Waiting for changes to input files...
BUILD SUCCESSFUL in 6s
3 actionable tasks: 3 executed
Waiting for changes to input files...
====

== Moving forward
You just created and built your very own application. In the next chapter you'll get familiar with <<cms#, Content Studio and content modelling>>.
38 changes: 38 additions & 0 deletions samples/guillotine/guillotine.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
// Using the Person data type
const personType = 'com_example_myapp_Person_Data';

export const extensions = (graphQL) => {
return {
creationCallbacks: {
[personType]: function (params) {
// Add a new field: age
params.addFields({
age: {
type: graphQL.GraphQLInt
}
});
}
},
resolvers: {
[personType]: {
// Implement the age resolver
age: (env) => {
if (!env.source.dateofbirth) {return null;}

// Caclulate age
let age = null;
const today = new Date();
const birthDate = new Date(env.source.dateofbirth);
age = today.getFullYear() - birthDate.getFullYear();
const m = today.getMonth() - birthDate.getMonth();

// Tune for moth and day
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
}
},
}
};

0 comments on commit b4971f1

Please sign in to comment.