Update cms-kontent example SDK package to v11 (#37187)

* Updates the Kontent Delivery SDK from v9 to v11.
* Updates the `lib/api.js` code that utilises the SDK accordingly.
* Removes `rxjs` as this is no longer a dependency of the Kontent
  Delivery SDK in v11.
* Updates other packages to the latest versions, including `react`.

Ref:
* https://kontent.ai/blog/news-in-javascript-sdks/

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`

examples/cms-kontent/lib/api.js

@@ -16,31 +16,32 @@ const client = new DeliveryClient({
 
 function parseAuthor(author) {
   return {
-    name: author.name.value,
-    picture: author.picture.value[0].url,
+    name: author.elements.name.value,
+    picture: author.elements.picture.value[0].url,
   }
 }
 
 function parsePost(post) {
   return {
-    title: post.title.value,
-    slug: post.slug.value,
-    date: post.date.value.toISOString(),
-    content: post.content.value,
-    excerpt: post.excerpt.value,
-    coverImage: post.cover_image.value[0].url,
-    author: parseAuthor(post.author.value[0]),
+    title: post.elements.title.value,
+    slug: post.elements.slug.value,
+    date: post.elements.date.value,
+    content: post.elements.content.value,
+    excerpt: post.elements.excerpt.value,
+    coverImage: post.elements.cover_image.value[0].url,
+    author: parseAuthor(post.elements.author.linkedItems[0]),
   }
 }
 
 export async function getAllPostSlugs() {
-  const postsResponse = await client
+  return await client
     .items()
     .type('post')
     .elementsParameter(['slug'])
     .toPromise()
-
-  return postsResponse.items.map((post) => post.slug.value)
+    .then((response) =>
+      response.data.items.map((post) => post.elements.slug.value)
+    )
 }
 
 export async function getMorePostsForSlug(slug, preview) {
@@ -51,26 +52,22 @@ export async function getMorePostsForSlug(slug, preview) {
     })
     .type('post')
     .orderByDescending('elements.date')
-    .withParameter('elements.slug[neq]', slug)
+    .notEqualsFilter('elements.slug', slug)
     .limitParameter(2)
     .toPromise()
-    .then((res) => {
-      return res.items.map((post) => parsePost(post))
-    })
+    .then((response) => response.data.items.map((post) => parsePost(post)))
 }
 
 export async function getPostBySlug(slug, preview) {
-  const post = await client
+  return await client
     .items()
     .queryConfig({
       usePreviewMode: !!preview,
     })
     .type('post')
     .equalsFilter('elements.slug', slug)
     .toPromise()
-    .then((result) => result.getFirstItem())
-    .then((post) => parsePost(post))
-  return post
+    .then((response) => parsePost(response.data.items[0]))
 }
 
 export async function getAllPosts(preview) {
@@ -82,5 +79,5 @@ export async function getAllPosts(preview) {
     .type('post')
     .orderByDescending('elements.date')
     .toPromise()
-    .then((postsResponse) => postsResponse.items.map((post) => parsePost(post)))
+    .then((response) => response.data.items.map((post) => parsePost(post)))
 }

examples/cms-kontent/package.json

@@ -6,20 +6,19 @@
     "start": "next start"
   },
   "dependencies": {
-    "@kentico/kontent-delivery": "^9.2.0",
+    "@kentico/kontent-delivery": "^11.13.0",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
     "gray-matter": "4.0.3",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "remark": "14.0.2",
-    "remark-html": "15.0.1",
-    "rxjs": "^6.6.2"
+    "remark-html": "15.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "10.4.2",
-    "postcss": "8.4.5",
+    "autoprefixer": "10.4.7",
+    "postcss": "8.4.14",
     "tailwindcss": "^3.0.15"
   }
 }