81763 home aem query

.github/workflows/default-tests.yml

@@ -76,12 +76,14 @@ jobs:
         run: npm run build
         env:
           CI: true
+          AEM_GRAPHQL_ENDPOINT: ${{secrets.AEM_GRAPHQL_ENDPOINT}}
 
       - name: Cypress end-to-end 🧪
         uses: cypress-io/github-action@v4
         env:
           CI: true
           NODE_ENV: production
+          AEM_GRAPHQL_ENDPOINT: ${{secrets.AEM_GRAPHQL_ENDPOINT}}
         with:
           install: false
           start: npm run start

__tests__/pages/home.test.js

@@ -4,7 +4,7 @@
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import Home from '../../pages/home'
-import { getStaticProps } from '../../pages/home'
+import { getServerSideProps } from '../../pages/home'
 
 import { useRouter } from 'next/router'
 
@@ -14,9 +14,11 @@ jest.mock('next/router', () => ({
 }))
 
 //
-jest.mock('../../lib/cms', () => ({
-  fetchContent: () => {
-    return {}
+jest.mock('../../graphql/mappers/home', () => ({
+  getHomeContent: () => {
+    return new Promise(function (resolve, reject) {
+      resolve({})
+    })
   },
 }))
 
@@ -39,8 +41,8 @@ describe('Home page', () => {
     expect(homeDiv).toBeInTheDocument()
   })
 
-  it('Test getStaticProps', async () => {
-    const props = await getStaticProps({ locale: 'en' })
+  it('Test getServerSideProps', async () => {
+    const props = await getServerSideProps({ locale: 'en' })
 
     expect(props).toEqual({
       props: {

graphql/client.js

@@ -1,4 +1,4 @@
-import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
+import { gql, ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
 
 const link = new HttpLink({
   uri: process.env.AEM_GRAPHQL_ENDPOINT,
@@ -13,11 +13,9 @@ const client = new ApolloClient({
 })
 
 export default async function (AEMQuery) {
-  return client
-    .query({
-      query: AEMQuery,
-    })
-    .catch((error) => {
-      console.log(error)
-    })
+  return client.query({
+    query: gql`
+      ${AEMQuery}
+    `,
+  })
 }

graphql/mappers/home.js

@@ -0,0 +1,77 @@
+import { getFragmentQueryDocument } from '@apollo/client/utilities'
+import clientQuery from '../client'
+
+export async function getHomeContent() {
+  const query = require('../queries/home.graphql')
+  const response = await clientQuery(query)
+  const mappedHome = {
+    en: {
+      pageName: response.data.schPagev1ByPath.item.scPageNameEn,
+      heading: response.data.schPagev1ByPath.item.scTitleEn,
+      cards: response.data.schPagev1ByPath.item.scFragments
+        .find((element) => element.scId === 'dashboard-cards')
+        .scItems.map((fragment) => {
+          return {
+            id: fragment.scId,
+            title: fragment.scTitleEn,
+            lists: fragment.schLists.map((list) => {
+              return {
+                title: list.scTitleEn,
+                tasks: list.scItems.map((item) => {
+                  return {
+                    title: item.scTitleEn,
+                    link: item.scDestinationURLEn,
+                    icon: item.scIconCSS,
+                  }
+                }),
+              }
+            }),
+          }
+        })
+        .filter((e) => e),
+      exitBeta: {
+        title: response.data.schPagev1ByPath.item.scFragments.find(
+          (element) => element.scId === 'EXIT-BETA-VERSION'
+        ).scTitleEn,
+        link: response.data.schPagev1ByPath.item.scFragments.find(
+          (element) => element.scId === 'EXIT-BETA-VERSION'
+        ).scDestinationURLEn,
+      },
+    },
+    fr: {
+      pageName: response.data.schPagev1ByPath.item.scPageNameFr,
+      heading: response.data.schPagev1ByPath.item.scTitleFr,
+      cards: response.data.schPagev1ByPath.item.scFragments
+        .find((element) => element.scId === 'dashboard-cards')
+        .scItems.map((fragment) => {
+          if (!fragment.scId) return
+          return {
+            id: fragment.scId,
+            title: fragment.scTitleFr,
+            lists: fragment.schLists.map((list) => {
+              return {
+                title: list.scTitleFr,
+                tasks: list.scItems.map((item) => {
+                  return {
+                    title: item.scTitleFr,
+                    link: item.scDestinationURLFr,
+                    icon: item.scIconCSS,
+                  }
+                }),
+              }
+            }),
+          }
+        })
+        .filter((e) => e),
+      exitBeta: {
+        title: response.data.schPagev1ByPath.item.scFragments.find(
+          (element) => element.scId === 'EXIT-BETA-VERSION'
+        ).scTitleFr,
+        link: response.data.schPagev1ByPath.item.scFragments.find(
+          (element) => element.scId === 'EXIT-BETA-VERSION'
+        ).scDestinationURLFr,
+      },
+    },
+  }
+  return mappedHome
+}

graphql/queries/home.graphql

@@ -0,0 +1,56 @@
+{
+	schPagev1ByPath(_path: "/content/dam/decd-endc/content-fragments/sch/pages/my-dashboard") {
+	    item {
+            _path
+            scPageNameEn
+            scPageNameFr
+            scTitleEn
+            scTitleFr
+            scShortTitleEn
+            scShortTitleFr
+            scBreadcrumbParentPages {
+                ... on SCHPagev1Model{
+                    scTitleEn
+                }
+            }
+            scContentType
+            scOwner
+            scDateModifiedOverwrite
+            scAudience
+            scFragments {
+                ... on SCHTaskv1Model{
+                    scId
+                    scTitleEn
+                    scTitleFr
+                    scDestinationURLEn
+                    scDestinationURLFr
+                }
+                ... on SCHListv1Model {
+                    scId
+                    scItems {
+                        ... on SCHCardv1Model {
+                            scId
+                            scTitleEn
+                            scTitleFr
+                            schLists{
+                                ... on SCHListv1Model {
+                                    scTitleEn
+                                    scTitleFr
+                                    scItems {
+                                        ... on SCHTaskv1Model{
+                                            scTitleEn
+                                            scTitleFr
+                                            scDestinationURLEn
+                                            scDestinationURLFr
+                                            scIconCSS
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+	}
+}

next.config.js

@@ -57,6 +57,16 @@ module.exports = {
     defaultLocale: 'en',
     localeDetection: true,
   },
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    //GraphQL loader for .graphql files
+    config.module.rules.push({
+      test: /\.(graphql|gql)$/,
+      exclude: /node_modules/,
+      loader: 'graphql-tag/loader',
+    })
+
+    return config
+  },
   //disable X-Powered-By
   poweredByHeader: false,
   // Image configured host

pages/_error.js

@@ -63,7 +63,7 @@ function CustomError({ statusCode }) {
 }
 
 /* istanbul ignore next */
-export async function getServerSideProps({ res, err, locale }) {
+export async function getServerSideProps({ res, err }) {
   const statusCode = res ? res.statusCode : err ? err.statusCode : 404
 
   /* Place-holder Meta Data Props */
@@ -81,11 +81,11 @@ export async function getServerSideProps({ res, err, locale }) {
       keywords: '',
     },
   }
-
   return {
-    statusCode,
-    locale,
-    meta,
+    props: {
+      statusCode,
+      meta,
+    },
   }
 }
 

pages/home.js

@@ -5,7 +5,8 @@ import fr from '../locales/fr'
 import Card from '../components/Card'
 
 import { TASK_GROUPS } from '../contents/BenefitTasksGroups'
-import { fetchContent } from '../lib/cms'
+import { getHomeContent } from '../graphql/mappers/home'
+import logger from '../lib/logger'
 
 export default function Home(props) {
   /* istanbul ignore next */
@@ -49,8 +50,12 @@ export default function Home(props) {
   )
 }
 
-export async function getStaticProps({ locale }) {
-  const content = await fetchContent()
+export async function getServerSideProps({ res, locale }) {
+  const content = await getHomeContent().catch((error) => {
+    logger.error(error)
+    res.statusCode = 500
+    throw error
+  })
 
   /* istanbul ignore next */
   const langToggleLink = locale === 'en' ? '/fr/home' : '/home'