show error message on homepage in case there is a problem with api co…

…nnection

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - ability to change user passwords
 - add default page background
 - add environment list in [doc](doc/environment.md)
+- show error message on homepage in case there is a problem with api connection
 
 ### Changed
 

graphql/query/status.query.ts

@@ -0,0 +1,20 @@
+import { QueryHookOptions, QueryResult, useQuery } from '@apollo/client'
+import { gql } from '@apollo/client/core'
+
+interface Data {
+  status: {
+    version: string
+  }
+}
+
+const QUERY = gql`
+  query status {
+    status {
+      version
+    }
+  }
+`
+
+export const useStatusQuery = (
+  options?: QueryHookOptions<Data, unknown>
+): QueryResult<Data, unknown> => useQuery<Data, unknown>(QUERY, options)

pages/index.tsx

@@ -1,12 +1,13 @@
-import { Layout } from 'antd'
+import { Alert, Layout } from 'antd'
 import { AuthFooter } from 'components/auth/footer'
-import { GetStaticProps, NextPage } from 'next'
+import { NextPage } from 'next'
 import getConfig from 'next/config'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LoadingPage } from '../components/loading.page'
 import { Omf } from '../components/omf'
+import { useStatusQuery } from '../graphql/query/status.query'
 import { NextConfigType } from '../next.config.type'
 
 const { publicRuntimeConfig } = getConfig() as NextConfigType
@@ -17,6 +18,7 @@ const Index: NextPage = () => {
   const [loading, setLoading] = useState<boolean>(
     publicRuntimeConfig.spa || (process.browser && router.pathname !== window.location.pathname)
   )
+  const status = useStatusQuery()
 
   useEffect(() => {
     if (router.pathname !== window.location.pathname) {
@@ -67,6 +69,9 @@ const Index: NextPage = () => {
         src={require('../assets/images/logo_white.png') as string}
       />
 
+      {status.error && (
+        <Alert message={`There is an error with your API connection: ${status.error.message}`} />
+      )}
       <AuthFooter />
     </Layout>
   )