From 1fc87845b21292ef39035235609fb5cadc35c56a Mon Sep 17 00:00:00 2001
From: "meng.zhu@nav.no" <meng.zhu@nav.no>
Date: Thu, 15 Feb 2024 16:40:08 +0100
Subject: [PATCH 1/6] use get productarea

---
 components/dataproducts/dataproductList.tsx   |  1 +
 components/productArea/content.tsx            | 13 +--
 components/productArea/productAreaLinks.tsx   | 15 ++--
 .../productArea/productAreaMobileMenu.tsx     |  3 +-
 components/productArea/productAreaView.tsx    |  8 +-
 components/productArea/sidebar.tsx            |  3 +-
 components/search/resultList.tsx              | 14 +--
 components/search/searchResultLink.tsx        | 10 +--
 lib/queries/productAreas/productAreas.ts      | 54 -----------
 lib/rest/productAreas.ts                      | 33 +++++++
 lib/rest/restApi.ts                           |  1 +
 lib/schema/graphql.ts                         | 89 -------------------
 pages/dataproduct/[id]/[slug]/[[...page]].tsx |  7 --
 pages/productArea/[id].tsx                    | 81 ++++++++---------
 pages/search.tsx                              | 53 +++++------
 15 files changed, 129 insertions(+), 256 deletions(-)
 delete mode 100644 lib/queries/productAreas/productAreas.ts
 create mode 100644 lib/rest/productAreas.ts

diff --git a/components/dataproducts/dataproductList.tsx b/components/dataproducts/dataproductList.tsx
index e71a2a14..8c0a6f78 100644
--- a/components/dataproducts/dataproductList.tsx
+++ b/components/dataproducts/dataproductList.tsx
@@ -59,6 +59,7 @@ export const DataproductsList = ({ datasets }: DataproductsListProps) => {
                                             type={'Dataset'}
                                             keywords={dataset.keywords}
                                             link={`/dataproduct/${dataset.dataproductID}/${dataset.dataproduct.slug}/${dataset.id}`}
+                                            productAreas={[]}
                                         />
                                     })
                                     }
diff --git a/components/productArea/content.tsx b/components/productArea/content.tsx
index 6fe8c197..fe496d11 100644
--- a/components/productArea/content.tsx
+++ b/components/productArea/content.tsx
@@ -1,9 +1,10 @@
 import { Tabs } from "@navikt/ds-react";
 import { PAItem } from "../../pages/productArea/[id]";
 import SearchResultLink from "../search/searchResultLink";
-import { useProductAreasQuery, useTeamkatalogenQuery } from "../../lib/schema/graphql";
+import { useTeamkatalogenQuery } from "../../lib/schema/graphql";
 import { useContext } from "react";
 import { UserState } from "../../lib/context";
+import { useGetProductAreas } from "../../lib/rest/productAreas";
 
 interface ProductAreaContentProps {
     currentItem: PAItem
@@ -15,9 +16,11 @@ const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductA
     const tk = useTeamkatalogenQuery({
         variables: { q: '' },
     })
-    const po = useProductAreasQuery()
+    const {productAreas, loading, error} = useGetProductAreas()
     const userInfo= useContext(UserState)
 
+    if (loading) return <div>Laster...</div>
+    if (error) return <div>Noe gikk galt</div>
     return (
         <Tabs
             value={currentTab}
@@ -72,7 +75,7 @@ const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductA
                             link={`/story/${s.id}`}
                             type={s.__typename}
                             teamkatalogen={tk.data}
-                            productAreas={po.data}
+                            productAreas={productAreas}
                         />
                     ))}
                     {currentItem.stories.length == 0 && "Ingen fortellinger"}
@@ -92,7 +95,7 @@ const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductA
                             description={d.description}
                             link={`/dataproduct/${d.id}/${d.slug}`}
                             teamkatalogen={tk.data}
-                            productAreas={po.data}
+                            productAreas={productAreas}
                         />
                     ))}
                     {currentItem.dataproducts.length == 0 && "Ingen dataprodukter"}
@@ -118,7 +121,7 @@ const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductA
                             id={ip.id}
                             innsiktsproduktType={ip.type}
                             teamkatalogen={tk.data}
-                            productAreas={po.data}
+                            productAreas={productAreas}
                             editable={!!userInfo?.googleGroups?.find(it=> it.email == ip.group)}
                         />
                     ))}
diff --git a/components/productArea/productAreaLinks.tsx b/components/productArea/productAreaLinks.tsx
index 2e3bdbe6..2e06a77e 100644
--- a/components/productArea/productAreaLinks.tsx
+++ b/components/productArea/productAreaLinks.tsx
@@ -1,17 +1,18 @@
 import { Heading, Link } from '@navikt/ds-react'
-import { useProductAreasQuery } from '../../lib/schema/graphql'
 import ExploreAreasIcon from '../lib/icons/exploreAreasIcon'
+import { useGetProductAreas } from '../../lib/rest/productAreas'
 
 const ProductAreaLinks = () => {
   var defaultProductAreaID = '6b149078-927b-4570-a1ce-97bbb9499fb6'
-  const productAreasQuery = useProductAreasQuery()
+  const {productAreas} = useGetProductAreas()
 
-  if (productAreasQuery.data && productAreasQuery.data.productAreas.length > 0) {
-    defaultProductAreaID =
-    productAreasQuery.data.productAreas.find(
+    defaultProductAreaID =productAreas?.find(
       (it) => it.id == '6b149078-927b-4570-a1ce-97bbb9499fb6'
-    )?.id || productAreasQuery.data.productAreas[0].id
-  }
+    )?.id || productAreas?.length && productAreas[0].id
+  
+    if(!defaultProductAreaID){
+      return null
+    }
   
   return (
     <div className="border border-border-default bg-white rounded-lg w-11/12 md:w-[17rem] md:h-[22rem] p-4 pt-8 flex items-center flex-col gap-8">
diff --git a/components/productArea/productAreaMobileMenu.tsx b/components/productArea/productAreaMobileMenu.tsx
index 0a373946..fe676ec8 100644
--- a/components/productArea/productAreaMobileMenu.tsx
+++ b/components/productArea/productAreaMobileMenu.tsx
@@ -1,7 +1,6 @@
 import { Back, Next } from "@navikt/ds-icons"
 import { Button, Heading, Modal } from "@navikt/ds-react"
 import { useState } from "react"
-import { ProductAreasQuery } from "../../lib/schema/graphql"
 import { PAItems } from "../../pages/productArea/[id]"
 
 interface MobileMenuProps {
@@ -9,7 +8,7 @@ interface MobileMenuProps {
     setOpen: (value: boolean) => void
     productAreaItems: PAItems
     setCurrentItem: (newCurrent: number) => void
-    productAreas: ProductAreasQuery['productAreas']
+    productAreas: any[]
     selectProductArea: (productAreaId: string) => void
 }
 
diff --git a/components/productArea/productAreaView.tsx b/components/productArea/productAreaView.tsx
index 6cdc5001..c38c4823 100644
--- a/components/productArea/productAreaView.tsx
+++ b/components/productArea/productAreaView.tsx
@@ -2,7 +2,6 @@ import { System } from '@navikt/ds-icons'
 import { Heading } from '@navikt/ds-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { ProductAreasQuery } from '../../lib/schema/graphql'
 import { PAItem, PAItems } from '../../pages/productArea/[id]'
 import ProductAreaContent from './content'
 import ProductAreaMobileMenu from './productAreaMobileMenu'
@@ -10,16 +9,19 @@ import ProductAreaSidebar from './sidebar'
 
 interface ProductAreaViewProps {
   paItems: PAItems
-  productAreas: ProductAreasQuery['productAreas']
+  productAreas: any[]
 }
 
 const ProductAreaView = ({ paItems, productAreas }: ProductAreaViewProps) => {
   const router = useRouter()
-  const currentItemName = (router.query.team as string) || paItems[0].name
+  const currentItemName = (router.query.team as string) || paItems.length && paItems[0].name || ''
   const teamIdx = paItems.findIndex(
     (it) => it.name.toLowerCase() === currentItemName.toLowerCase() || it.id === currentItemName
   )
 
+  if(!currentItemName){
+    return <div>Ingen produktområder samsvarer med søkekriteriene</div>
+  }
   const currentItem = teamIdx > 0 ? teamIdx : 0
 
   const initialTab = (item: PAItem) => {
diff --git a/components/productArea/sidebar.tsx b/components/productArea/sidebar.tsx
index b1f2c60f..7ed33edc 100644
--- a/components/productArea/sidebar.tsx
+++ b/components/productArea/sidebar.tsx
@@ -2,7 +2,6 @@ import { Data } from '@navikt/ds-icons'
 import { Select } from '@navikt/ds-react'
 import { useRouter } from 'next/router'
 import * as React from 'react'
-import { ProductAreasQuery } from '../../lib/schema/graphql'
 import { PAItems } from '../../pages/productArea/[id]'
 import DataproductLogo from '../lib/icons/dataproductLogo'
 
@@ -10,7 +9,7 @@ interface ProductAreaSidebarProps {
   productAreaItems: PAItems
   setCurrentItem: (newCurrent: number) => void
   currentItem: number
-  productAreas: ProductAreasQuery['productAreas']
+  productAreas: any[]
   selectProductArea: (productAreaId: string) => void
 }
 
diff --git a/components/search/resultList.tsx b/components/search/resultList.tsx
index c3ad23b3..6d65096c 100644
--- a/components/search/resultList.tsx
+++ b/components/search/resultList.tsx
@@ -4,7 +4,6 @@ import {
   SearchContentWithOptionsQuery,
   SearchOptions,
   useDeleteStoryMutation,
-  useProductAreasQuery,
   useTeamkatalogenQuery,
 } from '../../lib/schema/graphql'
 import ErrorMessage from '../lib/error'
@@ -16,6 +15,7 @@ import { SearchParam } from '../../pages/search'
 import { useRouter } from 'next/router'
 import { USER_INFO } from '../../lib/queries/userInfo/userInfo'
 import { UserState } from '../../lib/context'
+import { useGetProductAreas } from '../../lib/rest/productAreas'
 
 const Results = ({ children }: { children: React.ReactNode }) => (
   <div className="results">{children}</div>
@@ -87,7 +87,7 @@ const ResultList = ({
     variables: { q: '' },
   })
 
-  const po = useProductAreasQuery()
+  const {productAreas} = useGetProductAreas()
   const [deleteStoryQuery] = useDeleteStoryMutation()
   const userInfo= useContext(UserState)
   const deleteStory = (id: string) => deleteStoryQuery({
@@ -150,7 +150,7 @@ const ResultList = ({
                     teamkatalogenURL: it.result.teamkatalogenURL,
                   }}
                   teamkatalogen={tk.data}
-                  productAreas={po.data}
+                  productAreas={productAreas}
                 />
               )
               )
@@ -170,7 +170,7 @@ const ResultList = ({
                     link={`/dataproduct/${d.result.id}/${d.result.slug}`}
                     datasets={d.result.datasets}
                     teamkatalogen={tk.data}
-                    productAreas={po.data}
+                    productAreas={productAreas}
                   />
                 )
             )}
@@ -191,7 +191,7 @@ const ResultList = ({
             keywords={d.keywords}
             link={`/dataproduct/${d.id}/${d.slug}`}
             teamkatalogen={tk.data}
-            productAreas={po.data}
+            productAreas={productAreas}
           />
         ))}
       </Results>
@@ -214,7 +214,7 @@ const ResultList = ({
               resourceType={"datafortelling"}
               link={`/story/${s.id}`}
               teamkatalogen={tk.data}
-              productAreas={po.data}
+              productAreas={productAreas}
               keywords={s.keywords}
               editable = {true}
               description= {s.description}
@@ -242,7 +242,7 @@ const ResultList = ({
               name={p.name}
               link={p.link}
               teamkatalogen={tk.data}
-              productAreas={po.data}
+              productAreas={productAreas}
               description= {p.description}
               innsiktsproduktType={p.type}
               editable={!!userInfo?.googleGroups?.find(it=> it.email == p.group)}     
diff --git a/components/search/searchResultLink.tsx b/components/search/searchResultLink.tsx
index 1d8e8fbf..fe91db50 100644
--- a/components/search/searchResultLink.tsx
+++ b/components/search/searchResultLink.tsx
@@ -4,13 +4,12 @@ import ReactMarkdown from 'react-markdown'
 import { PluggableList } from 'react-markdown/lib'
 import remarkGfm from 'remark-gfm'
 import { CoApplicant, Table } from '@navikt/ds-icons'
-import { ProductAreasQuery, TeamkatalogenQuery, useDeleteInsightProductMutation, useDeleteStoryMutation } from '../../lib/schema/graphql'
+import { TeamkatalogenQuery, useDeleteInsightProductMutation, useDeleteStoryMutation } from '../../lib/schema/graphql'
 import humanizeDate from '../../lib/humanizeDate'
 import DeleteModal from '../lib/deleteModal'
 import { useState } from 'react'
 import { useRouter } from 'next/router'
 import { USER_INFO } from '../../lib/queries/userInfo/userInfo'
-import { GET_PRODUCT_AREAS } from '../../lib/queries/productAreas/productAreas'
 import TagPill from '../lib/tagPill'
 
 export interface SearchResultProps {
@@ -33,7 +32,7 @@ export interface SearchResultProps {
     }
   }[]
   teamkatalogen?: TeamkatalogenQuery,
-  productAreas?: ProductAreasQuery,
+  productAreas?: any[],
   editable?: boolean,
   deleteResource?: (id: string) => Promise<any>,
 }
@@ -57,7 +56,7 @@ export const SearchResultLink = ({
   const [modal, setModal] = useState(false)
 
   const tk = teamkatalogen?.teamkatalogen.find((it) => it.url == group?.teamkatalogenURL)
-  const po = productAreas?.productAreas.find((it) => it.id == tk?.productAreaID)
+  const po = productAreas?.find((it) => it.id == tk?.productAreaID)
   const owner = tk?.name || group?.group
   const router = useRouter();
   const [error, setError] = useState<string | undefined>(undefined)
@@ -78,9 +77,6 @@ export const SearchResultLink = ({
         id: id
       },
       refetchQueries:[
-        {
-          query: GET_PRODUCT_AREAS,
-        },
         {
           query: USER_INFO,
         }
diff --git a/lib/queries/productAreas/productAreas.ts b/lib/queries/productAreas/productAreas.ts
deleted file mode 100644
index 98c00a6f..00000000
--- a/lib/queries/productAreas/productAreas.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { gql } from 'graphql-tag'
-
-export const GET_PRODUCT_AREAS = gql`
-  query ProductAreas {
-    productAreas {
-      id
-      name
-      areaType
-      dataproducts{
-        id
-        name
-        description
-        owner{
-          group
-        }
-      }
-      stories{
-        id
-        name
-        description
-        created
-        lastModified
-        keywords
-      }
-      insightProducts{
-        id
-        name
-        created
-        lastModified
-        keywords
-        type
-        group
-        teamkatalogenURL        
-        link
-      }
-    teams{
-        id
-        name
-        dataproducts{
-          id
-          name
-        }
-        stories{
-          id
-          name
-        }
-        insightProducts{
-          id
-          name
-        }
-      }
-    }
-  }
-`
diff --git a/lib/rest/productAreas.ts b/lib/rest/productAreas.ts
new file mode 100644
index 00000000..679479f3
--- /dev/null
+++ b/lib/rest/productAreas.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import { getProductAreasUrl } from "./restApi";
+
+const getProductAreas = async () => {
+    const url = getProductAreasUrl();
+    const options = {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    }
+    return fetch(url, options)
+}
+
+export const useGetProductAreas = () => {
+    const [productAreas, setProductAreas] = useState<any[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        getProductAreas().then((res) => res.json())
+            .then((productAreas) => {
+            setError(null);
+            setProductAreas(productAreas);
+        })
+            .catch((err) => {
+            setError(err);
+            setProductAreas([]);
+        }).finally(() => {
+            setLoading(false);
+        });
+    }, []);
+    return { productAreas, loading, error };
+}
\ No newline at end of file
diff --git a/lib/rest/restApi.ts b/lib/rest/restApi.ts
index b950ad91..8782b435 100644
--- a/lib/rest/restApi.ts
+++ b/lib/rest/restApi.ts
@@ -9,3 +9,4 @@ const apiUrl = () => {
 
 export const getDataproductUrl = (id: string)=> `${apiUrl()}/dataproducts/${id}`
 export const getDatasetUrl = (id: string)=> `${apiUrl()}/datasets/${id}`
+export const getProductAreasUrl = () => `${apiUrl()}/productareas`
diff --git a/lib/schema/graphql.ts b/lib/schema/graphql.ts
index e3200670..a7e6c9b8 100644
--- a/lib/schema/graphql.ts
+++ b/lib/schema/graphql.ts
@@ -1487,11 +1487,6 @@ export type ProductAreaQueryVariables = Exact<{
 
 export type ProductAreaQuery = { __typename?: 'Query', productArea: { __typename?: 'ProductArea', id: string, name: string, dashboardURL: string, teams: Array<{ __typename?: 'Team', id: string, name: string, dashboardURL: string, dataproducts: Array<{ __typename?: 'Dataproduct', id: string, name: string, description: string, created: any, lastModified: any, keywords: Array<string>, slug: string, owner: { __typename?: 'Owner', group: string, teamkatalogenURL?: string | null, teamContact?: string | null } }>, stories: Array<{ __typename?: 'Story', id: string, name: string, created: any, lastModified?: any | null, description: string, keywords: Array<string>, group: string, teamkatalogenURL?: string | null }>, insightProducts: Array<{ __typename?: 'InsightProduct', id: string, name: string, description: string, created: any, lastModified?: any | null, group: string, teamkatalogenURL?: string | null, keywords: Array<string>, type: string, link: string }> }>, dataproducts: Array<{ __typename?: 'Dataproduct', id: string, name: string, description: string, created: any, lastModified: any, keywords: Array<string>, slug: string, owner: { __typename?: 'Owner', group: string, teamkatalogenURL?: string | null, teamContact?: string | null } }>, stories: Array<{ __typename?: 'Story', id: string, name: string, created: any, description: string, lastModified?: any | null, keywords: Array<string>, group: string, teamkatalogenURL?: string | null }>, insightProducts: Array<{ __typename?: 'InsightProduct', id: string, name: string, description: string, created: any, group: string, teamkatalogenURL?: string | null, lastModified?: any | null, keywords: Array<string>, type: string, link: string }> } };
 
-export type ProductAreasQueryVariables = Exact<{ [key: string]: never; }>;
-
-
-export type ProductAreasQuery = { __typename?: 'Query', productAreas: Array<{ __typename?: 'ProductArea', id: string, name: string, areaType: string, dataproducts: Array<{ __typename?: 'Dataproduct', id: string, name: string, description: string, owner: { __typename?: 'Owner', group: string } }>, stories: Array<{ __typename?: 'Story', id: string, name: string, description: string, created: any, lastModified?: any | null, keywords: Array<string> }>, insightProducts: Array<{ __typename?: 'InsightProduct', id: string, name: string, created: any, lastModified?: any | null, keywords: Array<string>, type: string, group: string, teamkatalogenURL?: string | null, link: string }>, teams: Array<{ __typename?: 'Team', id: string, name: string, dataproducts: Array<{ __typename?: 'Dataproduct', id: string, name: string }>, stories: Array<{ __typename?: 'Story', id: string, name: string }>, insightProducts: Array<{ __typename?: 'InsightProduct', id: string, name: string }> }> }> };
-
 export type JoinableViewQueryVariables = Exact<{
   id: Scalars['ID']['input'];
 }>;
@@ -2924,90 +2919,6 @@ export type ProductAreaQueryHookResult = ReturnType<typeof useProductAreaQuery>;
 export type ProductAreaLazyQueryHookResult = ReturnType<typeof useProductAreaLazyQuery>;
 export type ProductAreaSuspenseQueryHookResult = ReturnType<typeof useProductAreaSuspenseQuery>;
 export type ProductAreaQueryResult = Apollo.QueryResult<ProductAreaQuery, ProductAreaQueryVariables>;
-export const ProductAreasDocument = gql`
-    query ProductAreas {
-  productAreas {
-    id
-    name
-    areaType
-    dataproducts {
-      id
-      name
-      description
-      owner {
-        group
-      }
-    }
-    stories {
-      id
-      name
-      description
-      created
-      lastModified
-      keywords
-    }
-    insightProducts {
-      id
-      name
-      created
-      lastModified
-      keywords
-      type
-      group
-      teamkatalogenURL
-      link
-    }
-    teams {
-      id
-      name
-      dataproducts {
-        id
-        name
-      }
-      stories {
-        id
-        name
-      }
-      insightProducts {
-        id
-        name
-      }
-    }
-  }
-}
-    `;
-
-/**
- * __useProductAreasQuery__
- *
- * To run a query within a React component, call `useProductAreasQuery` and pass it any options that fit your needs.
- * When your component renders, `useProductAreasQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useProductAreasQuery({
- *   variables: {
- *   },
- * });
- */
-export function useProductAreasQuery(baseOptions?: Apollo.QueryHookOptions<ProductAreasQuery, ProductAreasQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ProductAreasQuery, ProductAreasQueryVariables>(ProductAreasDocument, options);
-      }
-export function useProductAreasLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProductAreasQuery, ProductAreasQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ProductAreasQuery, ProductAreasQueryVariables>(ProductAreasDocument, options);
-        }
-export function useProductAreasSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<ProductAreasQuery, ProductAreasQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useSuspenseQuery<ProductAreasQuery, ProductAreasQueryVariables>(ProductAreasDocument, options);
-        }
-export type ProductAreasQueryHookResult = ReturnType<typeof useProductAreasQuery>;
-export type ProductAreasLazyQueryHookResult = ReturnType<typeof useProductAreasLazyQuery>;
-export type ProductAreasSuspenseQueryHookResult = ReturnType<typeof useProductAreasSuspenseQuery>;
-export type ProductAreasQueryResult = Apollo.QueryResult<ProductAreasQuery, ProductAreasQueryVariables>;
 export const JoinableViewDocument = gql`
     query JoinableView($id: ID!) {
   joinableView(id: $id) {
diff --git a/pages/dataproduct/[id]/[slug]/[[...page]].tsx b/pages/dataproduct/[id]/[slug]/[[...page]].tsx
index de6a0e31..3ab10036 100644
--- a/pages/dataproduct/[id]/[slug]/[[...page]].tsx
+++ b/pages/dataproduct/[id]/[slug]/[[...page]].tsx
@@ -2,11 +2,8 @@ import LoaderSpinner from '../../../../components/lib/spinner'
 import ErrorMessage from '../../../../components/lib/error'
 import {
   Group,
-  SearchContentDocument,
   useDeleteDataproductMutation,
 } from '../../../../lib/schema/graphql'
-import { GetServerSideProps } from 'next'
-import { addApolloState, initializeApollo } from '../../../../lib/apollo'
 import * as React from 'react'
 import { useContext, useEffect, useState } from 'react'
 import amplitudeLog from '../../../../lib/amplitude'
@@ -25,10 +22,6 @@ import { truncate } from '../../../../lib/stringUtils'
 import InnerContainer from '../../../../components/lib/innerContainer'
 import { useGetDataproduct } from '../../../../lib/rest/dataproducts'
 
-interface DataproductProps {
-  id: string
-  slug: string
-}
 
 const Dataproduct = () => {
   const router = useRouter()
diff --git a/pages/productArea/[id].tsx b/pages/productArea/[id].tsx
index 30a9f41c..41afa19a 100644
--- a/pages/productArea/[id].tsx
+++ b/pages/productArea/[id].tsx
@@ -8,10 +8,9 @@ import ProductAreaView from '../../components/productArea/productAreaView'
 import amplitudeLog from '../../lib/amplitude'
 import {
   ProductAreaQuery,
-  ProductAreasQuery,
   useProductAreaQuery,
-  useProductAreasQuery,
 } from '../../lib/schema/graphql'
+import { useGetProductAreas } from '../../lib/rest/productAreas'
 
 
 export interface PAItem {
@@ -53,54 +52,54 @@ export interface PAItem {
     created: any
     lastModified?: any
     keywords: Array<string>
-  }[]  
+  }[]
 }
 
-export interface PAItems extends Array<PAItem> {}
+export interface PAItems extends Array<PAItem> { }
 
 const isRelevantPA = (productArea: ProductAreaQuery['productArea']) => {
-    return (
-        productArea.dataproducts.length 
-        || productArea.stories.length 
-        || productArea.insightProducts.length
-    )
+  return (
+    productArea.dataproducts.length
+    || productArea.stories.length
+    || productArea.insightProducts.length
+  )
 }
 
 const createPAItems = (productArea: ProductAreaQuery['productArea']) => {
   let items = []
   if (isRelevantPA(productArea)) {
     items.push({
-        name: productArea.name,
-        dashboardURL: productArea.dashboardURL,
-        dataproducts: productArea.dataproducts,
-        stories: productArea.stories,
-        insightProducts: productArea.insightProducts,
+      name: productArea.name,
+      dashboardURL: productArea.dashboardURL,
+      dataproducts: productArea.dataproducts,
+      stories: productArea.stories,
+      insightProducts: productArea.insightProducts,
     })
     productArea.teams
-    .slice()
-    .filter(
+      .slice()
+      .filter(
         (it) =>
-        it.dataproducts.length > 0 ||
-        it.stories.length > 0 ||
-        it.insightProducts.length > 0
-    )
-    .sort((a, b) => {
+          it.dataproducts.length > 0 ||
+          it.stories.length > 0 ||
+          it.insightProducts.length > 0
+      )
+      .sort((a, b) => {
         return (
-        b.dataproducts.length +
-        b.insightProducts.length -
-        (a.dataproducts.length + a.stories.length + a.insightProducts.length)
+          b.dataproducts.length +
+          b.insightProducts.length -
+          (a.dataproducts.length + a.stories.length + a.insightProducts.length)
         )
-    })
-    .forEach((t) => {
+      })
+      .forEach((t) => {
         items.push({
-        name: t.name,
-        id: t.id,
-        dashboardURL: t.dashboardURL,
-        dataproducts: t.dataproducts,
-        stories: t.stories,
-        insightProducts: t.insightProducts,
+          name: t.name,
+          id: t.id,
+          dashboardURL: t.dashboardURL,
+          dataproducts: t.dataproducts,
+          stories: t.stories,
+          insightProducts: t.insightProducts,
         })
-    })
+      })
   }
 
   return items
@@ -108,7 +107,7 @@ const createPAItems = (productArea: ProductAreaQuery['productArea']) => {
 
 interface ProductAreaProps {
   id: string
-  productAreas: ProductAreasQuery['productAreas']
+  productAreas: any[]
 }
 
 const ProductArea = ({ id, productAreas }: ProductAreaProps) => {
@@ -141,29 +140,25 @@ const ProductArea = ({ id, productAreas }: ProductAreaProps) => {
 
 const ProductAreaPage = () => {
   const router = useRouter()
-  const productAreasQuery = useProductAreasQuery()
+  const { productAreas, loading, error } = useGetProductAreas()
 
   if (!router.isReady) return <Loader />
 
-  if (productAreasQuery.error)
+  if (error)
     return (
       <div>
         <p>Teamkatalogen er utilgjengelig. Se på slack channel <Link href="https://slack.com/app_redirect?channel=teamkatalogen">#Teamkatalogen</Link></p>
-        <ErrorMessage error={productAreasQuery.error} />
+        <ErrorMessage error={error} />
       </div>
     )
-  if (
-    productAreasQuery.loading ||
-    !productAreasQuery.data?.productAreas ||
-    !productAreasQuery.data.productAreas.length
-  )
+  if ( loading ||!productAreas?.length)
     return <Loader />
 
   return (
     <InnerContainer>
       <ProductArea
         id={router.query.id as string}
-        productAreas={productAreasQuery.data.productAreas}
+        productAreas={productAreas}
       />
     </InnerContainer>
   )
diff --git a/pages/search.tsx b/pages/search.tsx
index 19570f51..67e0c33a 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -11,12 +11,11 @@ import { SearchPanel } from '../components/search/searchPanel'
 import {
   Exact,
   KeywordsQuery,
-  ProductAreasQuery,
   SearchType,
   useKeywordsQuery,
-  useProductAreasQuery,
   useSearchContentWithOptionsQuery,
 } from '../lib/schema/graphql'
+import { useGetProductAreas } from '../lib/rest/productAreas'
 
 export interface SearchParam {
   [s: string]: string | string[]
@@ -91,38 +90,32 @@ const mapProductAreasToFiltersTree = (
 }
 
 const mapProductAreasWithResultToArray = (
-  productAreasQuery: ProductAreasQuery
+  productAreas: any[]
 ) =>
-  productAreasQuery.productAreas
+  productAreas
     .map((it) =>
-      !!it.dataproducts.length || !!it.stories.length
-        ? ({
+    ({
             name: it.name,
             teams: it.teams
-              .map((t) =>
-                !!t.dataproducts.length || !!t.stories.length
+              .map((t: any) =>
+                !!t.dataproductsNumber || !!t.storiesNumber
                   ? ({
                       name: t.name,
                     } as Team)
                   : null
               )
-              .filter((t) => !!t),
+              .filter((t: any) => !!t),
           } as ProductArea)
-        : null
     )
-    .filter((it) => !!it)
+    .filter((it) => it.teams?.length)
 
 const buildProductAreaFiltersTree = (
-  queryResult: QueryResult<ProductAreasQuery, Exact<{ [key: string]: never }>>,
+  productAreas: any[],
   pickedFilters: string[]
-) => {
-  return queryResult.loading || !queryResult.data
-    ? ({} as FilterTreeNode)
-    : mapProductAreasToFiltersTree(
-        mapProductAreasWithResultToArray(queryResult.data),
+) => mapProductAreasToFiltersTree(
+        mapProductAreasWithResultToArray(productAreas),
         pickedFilters
       )
-}
 
 const buildKeywordsFiltersTree = (
   queryResult: QueryResult<KeywordsQuery, Exact<{ [key: string]: never }>>,
@@ -143,19 +136,17 @@ const buildKeywordsFiltersTree = (
 //backend search use team_id instead of team name, which is not human readable
 //so we use the maps to convert the values
 const buildTeamIDMaps = (
-  queryResult: QueryResult<ProductAreasQuery, Exact<{ [key: string]: never }>>
+  productAreas: any
 ) => {
-  return queryResult.loading || !queryResult.data
-    ? [new Map(), new Map()]
-    : [
+  return [
         new Map(
-          queryResult.data.productAreas.flatMap((it) =>
-            it.teams.map((t) => [t.name, t.id])
+          productAreas.flatMap((it: any) =>
+            it.teams.map((t: any) => [t.name, t.id])
           )
         ),
         new Map(
-          queryResult.data.productAreas.flatMap((it) =>
-            it.teams.map((t) => [t.id, t.name])
+          productAreas.flatMap((it: any) =>
+            it.teams.map((t: any) => [t.id, t.name])
           )
         ),
       ]
@@ -164,9 +155,9 @@ const buildTeamIDMaps = (
 export type FilterType = 'Områder' | 'Nøkkelord'
 
 const Search = () => {
-  const po = useProductAreasQuery()
+  const {productAreas, loading, error} = useGetProductAreas()
   const kw = useKeywordsQuery()
-  const [teamNameToID, teamIDToName] = buildTeamIDMaps(po)
+  const [teamNameToID, teamIDToName] = loading || error? [new Map, new Map]: buildTeamIDMaps(productAreas)
 
   const router = useRouter()
   const baseUrl = router.asPath.split('?')[0]
@@ -177,10 +168,12 @@ const Search = () => {
     teams: arrayify(router.query.teamIDs).map((it) => teamIDToName.get(it)),
     keywords: arrayify(router.query.keywords),
   }
-  const productAreaFiltersTree = buildProductAreaFiltersTree(
-    po,
+  const productAreaFiltersTree = loading || error? {}:
+  buildProductAreaFiltersTree(
+    productAreas,
     searchParam.teams || []
   )
+
   const keywordsFiltersTree = buildKeywordsFiltersTree(
     kw,
     searchParam.keywords || []

From 780b823ec785ea700c5f2e8202a9158429df4bcb Mon Sep 17 00:00:00 2001
From: "meng.zhu@nav.no" <meng.zhu@nav.no>
Date: Thu, 15 Feb 2024 16:43:49 +0100
Subject: [PATCH 2/6] fix hook call

---
 components/productArea/productAreaView.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/productArea/productAreaView.tsx b/components/productArea/productAreaView.tsx
index c38c4823..ded0672b 100644
--- a/components/productArea/productAreaView.tsx
+++ b/components/productArea/productAreaView.tsx
@@ -19,9 +19,6 @@ const ProductAreaView = ({ paItems, productAreas }: ProductAreaViewProps) => {
     (it) => it.name.toLowerCase() === currentItemName.toLowerCase() || it.id === currentItemName
   )
 
-  if(!currentItemName){
-    return <div>Ingen produktområder samsvarer med søkekriteriene</div>
-  }
   const currentItem = teamIdx > 0 ? teamIdx : 0
 
   const initialTab = (item: PAItem) => {
@@ -30,6 +27,11 @@ const ProductAreaView = ({ paItems, productAreas }: ProductAreaViewProps) => {
 
   const [currentTab, setCurrentTab] = useState(initialTab(paItems[teamIdx]))
   const [open, setOpen] = useState(false)
+
+  if(!currentItemName){
+    return <div>Ingen produktområder samsvarer med søkekriteriene</div>
+  }
+
   const pathComponents = router.asPath.split('?')[0].split('/')
   const currentProductAreaId = pathComponents[pathComponents.length - 1]
 

From f044a1ce996869fa83b54218a8f3bb9fe497ab77 Mon Sep 17 00:00:00 2001
From: "meng.zhu@nav.no" <meng.zhu@nav.no>
Date: Thu, 15 Feb 2024 17:21:48 +0100
Subject: [PATCH 3/6] fix product area link

---
 components/productArea/productAreaLinks.tsx | 16 ++++++++--------
 components/productArea/productAreaView.tsx  |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/productArea/productAreaLinks.tsx b/components/productArea/productAreaLinks.tsx
index 2e06a77e..311cb6fc 100644
--- a/components/productArea/productAreaLinks.tsx
+++ b/components/productArea/productAreaLinks.tsx
@@ -2,18 +2,18 @@ import { Heading, Link } from '@navikt/ds-react'
 import ExploreAreasIcon from '../lib/icons/exploreAreasIcon'
 import { useGetProductAreas } from '../../lib/rest/productAreas'
 
+const ProductAreaHasItems = (p: any)=> p?.teams.filter((it: any)=> it.DataproductsNumber+ it.StoriesNumber> 0).length> 0
+
 const ProductAreaLinks = () => {
   var defaultProductAreaID = '6b149078-927b-4570-a1ce-97bbb9499fb6'
   const {productAreas} = useGetProductAreas()
+  const productAreaWithItems = productAreas?.filter(it=> ProductAreaHasItems(it));
+  if(productAreaWithItems.length>0){
+    defaultProductAreaID = productAreaWithItems.find(it=> it.id== defaultProductAreaID)?.id || productAreaWithItems[0].id
+  }else{
+    return null
+  }
 
-    defaultProductAreaID =productAreas?.find(
-      (it) => it.id == '6b149078-927b-4570-a1ce-97bbb9499fb6'
-    )?.id || productAreas?.length && productAreas[0].id
-  
-    if(!defaultProductAreaID){
-      return null
-    }
-  
   return (
     <div className="border border-border-default bg-white rounded-lg w-11/12 md:w-[17rem] md:h-[22rem] p-4 pt-8 flex items-center flex-col gap-8">
       <ExploreAreasIcon />
diff --git a/components/productArea/productAreaView.tsx b/components/productArea/productAreaView.tsx
index ded0672b..fb4b7833 100644
--- a/components/productArea/productAreaView.tsx
+++ b/components/productArea/productAreaView.tsx
@@ -22,7 +22,7 @@ const ProductAreaView = ({ paItems, productAreas }: ProductAreaViewProps) => {
   const currentItem = teamIdx > 0 ? teamIdx : 0
 
   const initialTab = (item: PAItem) => {
-    return item.dashboardURL ? 'dashboard' : 'stories'
+    return item?.dashboardURL ? 'dashboard' : 'stories'
   }
 
   const [currentTab, setCurrentTab] = useState(initialTab(paItems[teamIdx]))

From 479ed2404061353fcbf96732d749f96e07c4c3c4 Mon Sep 17 00:00:00 2001
From: "meng.zhu@nav.no" <meng.zhu@nav.no>
Date: Thu, 15 Feb 2024 17:33:50 +0100
Subject: [PATCH 4/6] fix product area link

---
 components/productArea/productAreaLinks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/productArea/productAreaLinks.tsx b/components/productArea/productAreaLinks.tsx
index 311cb6fc..61de2c31 100644
--- a/components/productArea/productAreaLinks.tsx
+++ b/components/productArea/productAreaLinks.tsx
@@ -2,7 +2,7 @@ import { Heading, Link } from '@navikt/ds-react'
 import ExploreAreasIcon from '../lib/icons/exploreAreasIcon'
 import { useGetProductAreas } from '../../lib/rest/productAreas'
 
-const ProductAreaHasItems = (p: any)=> p?.teams.filter((it: any)=> it.DataproductsNumber+ it.StoriesNumber> 0).length> 0
+const ProductAreaHasItems = (p: any)=> !!p?.teams.filter((it: any)=> it.dataproductsNumber+ it.storiesNumber> 0).length
 
 const ProductAreaLinks = () => {
   var defaultProductAreaID = '6b149078-927b-4570-a1ce-97bbb9499fb6'

From f369ecdb226c5db8ede10d32a2e0ff15e63a23b4 Mon Sep 17 00:00:00 2001
From: "meng.zhu@nav.no" <meng.zhu@nav.no>
Date: Fri, 16 Feb 2024 10:06:10 +0100
Subject: [PATCH 5/6] fix console error

---
 components/productArea/sidebar.tsx | 16 ++++++++--------
 lib/rest/productAreas.ts           | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/components/productArea/sidebar.tsx b/components/productArea/sidebar.tsx
index 7ed33edc..fc3cfd92 100644
--- a/components/productArea/sidebar.tsx
+++ b/components/productArea/sidebar.tsx
@@ -9,7 +9,7 @@ interface ProductAreaSidebarProps {
   productAreaItems: PAItems
   setCurrentItem: (newCurrent: number) => void
   currentItem: number
-  productAreas: any[]
+  productAreas: any
   selectProductArea: (productAreaId: string) => void
 }
 
@@ -22,11 +22,11 @@ const ProductAreaSidebar = ({
 }: ProductAreaSidebarProps) => {
   const relevantProductAreas = productAreas
     .filter(
-      (it) =>
-        it.dataproducts.length ||
-        it.stories.length ||
-        it.insightProducts.length
-    ).sort((l, r) => (l.name < r.name ? -1 : 1))
+      (it: any) =>
+        it.dataproductsNumber ||
+        it.storiesNumber ||
+        it.insightProductsNumber
+    ).sort((l: any, r: any) => (l.name < r.name ? -1 : 1))
   return (
     <div className="pr-[2rem] w-96 pt-[1.6rem] hidden md:block">
       <Select
@@ -34,11 +34,11 @@ const ProductAreaSidebar = ({
         label=""
         onChange={(e) => selectProductArea(e.target.value)}
         value={
-          relevantProductAreas.find((it) => it.name == productAreaItems[0].name)
+          relevantProductAreas.find((it: any) => it.name == productAreaItems[0].name)
             ?.id
         }
       >
-        {relevantProductAreas.map((it, index) => (
+        {relevantProductAreas.map((it: any, index: number) => (
           <option key={index} value={it.id}>
             {it.name}
           </option>
diff --git a/lib/rest/productAreas.ts b/lib/rest/productAreas.ts
index 679479f3..2929ced4 100644
--- a/lib/rest/productAreas.ts
+++ b/lib/rest/productAreas.ts
@@ -12,15 +12,25 @@ const getProductAreas = async () => {
     return fetch(url, options)
 }
 
+const enrichProductArea = (productArea: any) => {
+    return {
+        ...productArea,
+        dataproductsNumber: productArea.teams.reduce((acc: number, t: any) => acc + t.dataproductsNumber, 0),
+        storiesNumber: productArea.teams.reduce((acc: number, t: any) => acc + t.storiesNumber, 0),
+        insightProductsNumber: productArea.teams.reduce((acc: number, t: any) => acc + t.insightProductsNumber, 0),
+    }
+
+}
+
 export const useGetProductAreas = () => {
     const [productAreas, setProductAreas] = useState<any[]>([]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
     useEffect(() => {
         getProductAreas().then((res) => res.json())
-            .then((productAreas) => {
+            .then((productAreaDto) => {
             setError(null);
-            setProductAreas(productAreas);
+            setProductAreas([...productAreaDto.productAreas.map(enrichProductArea)]);
         })
             .catch((err) => {
             setError(err);

From f141e9405c99492e272e2dfae4a536e9699fa30c Mon Sep 17 00:00:00 2001
From: "meng.zhu@nav.no" <meng.zhu@nav.no>
Date: Fri, 16 Feb 2024 13:40:30 +0100
Subject: [PATCH 6/6] product area related feature mitigate to rest

---
 lib/queries/productAreas/productArea.ts |  89 -----------------
 lib/rest/productAreas.ts                |  43 +++++++-
 lib/rest/restApi.ts                     |   1 +
 lib/schema/graphql.ts                   | 126 ------------------------
 pages/productArea/[id].tsx              |  33 +++----
 5 files changed, 55 insertions(+), 237 deletions(-)
 delete mode 100644 lib/queries/productAreas/productArea.ts

diff --git a/lib/queries/productAreas/productArea.ts b/lib/queries/productAreas/productArea.ts
deleted file mode 100644
index 005f732f..00000000
--- a/lib/queries/productAreas/productArea.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { gql } from 'graphql-tag'
-
-export const GET_PRODUCT_AREA = gql`
-  query ProductArea($id: String!) {
-    productArea(id: $id) {
-      id
-      name
-      teams {
-        id
-        name
-        dashboardURL
-        dataproducts {
-          id
-          name
-          description
-          created
-          lastModified
-          keywords
-          slug
-          owner{
-            group
-            teamkatalogenURL
-            teamContact
-          }
-        }
-        stories{
-          id
-          name
-          created
-          lastModified
-          description
-          keywords
-          group
-          teamkatalogenURL
-        }
-        insightProducts{
-          id
-          name
-          description
-          created
-          lastModified
-          group
-          teamkatalogenURL          
-          keywords
-          type
-          link
-        }
-      }
-      dashboardURL
-      dataproducts{
-        id
-        name
-        description
-        created
-        lastModified
-        keywords
-        slug
-        owner{
-          group
-          teamkatalogenURL
-          teamContact
-        }
-      }
-      stories{
-          id
-          name
-          created
-          description
-          lastModified
-          keywords
-          group
-          teamkatalogenURL
- 
-      }
-      insightProducts{
-        id
-        name
-        description
-        created
-        group
-        teamkatalogenURL        
-        lastModified
-        keywords
-        type
-        link
-      }
-    }
-  }
-`
diff --git a/lib/rest/productAreas.ts b/lib/rest/productAreas.ts
index 2929ced4..fb471121 100644
--- a/lib/rest/productAreas.ts
+++ b/lib/rest/productAreas.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { getProductAreasUrl } from "./restApi";
+import { getProductAreaUrl, getProductAreasUrl } from "./restApi";
 
 const getProductAreas = async () => {
     const url = getProductAreasUrl();
@@ -12,6 +12,17 @@ const getProductAreas = async () => {
     return fetch(url, options)
 }
 
+const getProductArea = async (id: string) => {
+    const url = getProductAreaUrl(id);
+    const options = {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    }
+    return fetch(url, options)
+}
+
 const enrichProductArea = (productArea: any) => {
     return {
         ...productArea,
@@ -40,4 +51,34 @@ export const useGetProductAreas = () => {
         });
     }, []);
     return { productAreas, loading, error };
+}
+
+const enrichProductAreaWithAssets = (productArea: any) => {
+    return {
+        ...productArea,
+        dataproducts: productArea.teams.flatMap((t: any) => t.dataproducts),
+        stories: productArea.teams.flatMap((t: any) => t.stories),
+        insightProducts: productArea.teams.flatMap((t: any) => t.insightProducts),
+    }
+
+}
+
+export const useGetProductArea = (id: string) => {
+    const [productArea, setProductArea] = useState<any>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        getProductArea(id).then((res) => res.json())
+            .then((productAreaDto) => {
+            setError(null);
+            setProductArea(enrichProductAreaWithAssets(productAreaDto));
+        })
+            .catch((err) => {
+            setError(err);
+            setProductArea(null);
+        }).finally(() => {
+            setLoading(false);
+        });
+    }, [id]);
+    return { productArea, loading, error };
 }
\ No newline at end of file
diff --git a/lib/rest/restApi.ts b/lib/rest/restApi.ts
index 8782b435..a910262a 100644
--- a/lib/rest/restApi.ts
+++ b/lib/rest/restApi.ts
@@ -10,3 +10,4 @@ const apiUrl = () => {
 export const getDataproductUrl = (id: string)=> `${apiUrl()}/dataproducts/${id}`
 export const getDatasetUrl = (id: string)=> `${apiUrl()}/datasets/${id}`
 export const getProductAreasUrl = () => `${apiUrl()}/productareas`
+export const getProductAreaUrl = (id: string) => `${apiUrl()}/productareas/${id}`
diff --git a/lib/schema/graphql.ts b/lib/schema/graphql.ts
index a7e6c9b8..2236da81 100644
--- a/lib/schema/graphql.ts
+++ b/lib/schema/graphql.ts
@@ -1480,13 +1480,6 @@ export type PollyQueryVariables = Exact<{
 
 export type PollyQuery = { __typename?: 'Query', polly: Array<{ __typename?: 'QueryPolly', externalID: string, name: string, url: string }> };
 
-export type ProductAreaQueryVariables = Exact<{
-  id: Scalars['String']['input'];
-}>;
-
-
-export type ProductAreaQuery = { __typename?: 'Query', productArea: { __typename?: 'ProductArea', id: string, name: string, dashboardURL: string, teams: Array<{ __typename?: 'Team', id: string, name: string, dashboardURL: string, dataproducts: Array<{ __typename?: 'Dataproduct', id: string, name: string, description: string, created: any, lastModified: any, keywords: Array<string>, slug: string, owner: { __typename?: 'Owner', group: string, teamkatalogenURL?: string | null, teamContact?: string | null } }>, stories: Array<{ __typename?: 'Story', id: string, name: string, created: any, lastModified?: any | null, description: string, keywords: Array<string>, group: string, teamkatalogenURL?: string | null }>, insightProducts: Array<{ __typename?: 'InsightProduct', id: string, name: string, description: string, created: any, lastModified?: any | null, group: string, teamkatalogenURL?: string | null, keywords: Array<string>, type: string, link: string }> }>, dataproducts: Array<{ __typename?: 'Dataproduct', id: string, name: string, description: string, created: any, lastModified: any, keywords: Array<string>, slug: string, owner: { __typename?: 'Owner', group: string, teamkatalogenURL?: string | null, teamContact?: string | null } }>, stories: Array<{ __typename?: 'Story', id: string, name: string, created: any, description: string, lastModified?: any | null, keywords: Array<string>, group: string, teamkatalogenURL?: string | null }>, insightProducts: Array<{ __typename?: 'InsightProduct', id: string, name: string, description: string, created: any, group: string, teamkatalogenURL?: string | null, lastModified?: any | null, keywords: Array<string>, type: string, link: string }> } };
-
 export type JoinableViewQueryVariables = Exact<{
   id: Scalars['ID']['input'];
 }>;
@@ -2800,125 +2793,6 @@ export type PollyQueryHookResult = ReturnType<typeof usePollyQuery>;
 export type PollyLazyQueryHookResult = ReturnType<typeof usePollyLazyQuery>;
 export type PollySuspenseQueryHookResult = ReturnType<typeof usePollySuspenseQuery>;
 export type PollyQueryResult = Apollo.QueryResult<PollyQuery, PollyQueryVariables>;
-export const ProductAreaDocument = gql`
-    query ProductArea($id: String!) {
-  productArea(id: $id) {
-    id
-    name
-    teams {
-      id
-      name
-      dashboardURL
-      dataproducts {
-        id
-        name
-        description
-        created
-        lastModified
-        keywords
-        slug
-        owner {
-          group
-          teamkatalogenURL
-          teamContact
-        }
-      }
-      stories {
-        id
-        name
-        created
-        lastModified
-        description
-        keywords
-        group
-        teamkatalogenURL
-      }
-      insightProducts {
-        id
-        name
-        description
-        created
-        lastModified
-        group
-        teamkatalogenURL
-        keywords
-        type
-        link
-      }
-    }
-    dashboardURL
-    dataproducts {
-      id
-      name
-      description
-      created
-      lastModified
-      keywords
-      slug
-      owner {
-        group
-        teamkatalogenURL
-        teamContact
-      }
-    }
-    stories {
-      id
-      name
-      created
-      description
-      lastModified
-      keywords
-      group
-      teamkatalogenURL
-    }
-    insightProducts {
-      id
-      name
-      description
-      created
-      group
-      teamkatalogenURL
-      lastModified
-      keywords
-      type
-      link
-    }
-  }
-}
-    `;
-
-/**
- * __useProductAreaQuery__
- *
- * To run a query within a React component, call `useProductAreaQuery` and pass it any options that fit your needs.
- * When your component renders, `useProductAreaQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useProductAreaQuery({
- *   variables: {
- *      id: // value for 'id'
- *   },
- * });
- */
-export function useProductAreaQuery(baseOptions: Apollo.QueryHookOptions<ProductAreaQuery, ProductAreaQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ProductAreaQuery, ProductAreaQueryVariables>(ProductAreaDocument, options);
-      }
-export function useProductAreaLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProductAreaQuery, ProductAreaQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ProductAreaQuery, ProductAreaQueryVariables>(ProductAreaDocument, options);
-        }
-export function useProductAreaSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<ProductAreaQuery, ProductAreaQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useSuspenseQuery<ProductAreaQuery, ProductAreaQueryVariables>(ProductAreaDocument, options);
-        }
-export type ProductAreaQueryHookResult = ReturnType<typeof useProductAreaQuery>;
-export type ProductAreaLazyQueryHookResult = ReturnType<typeof useProductAreaLazyQuery>;
-export type ProductAreaSuspenseQueryHookResult = ReturnType<typeof useProductAreaSuspenseQuery>;
-export type ProductAreaQueryResult = Apollo.QueryResult<ProductAreaQuery, ProductAreaQueryVariables>;
 export const JoinableViewDocument = gql`
     query JoinableView($id: ID!) {
   joinableView(id: $id) {
diff --git a/pages/productArea/[id].tsx b/pages/productArea/[id].tsx
index 41afa19a..442c76fe 100644
--- a/pages/productArea/[id].tsx
+++ b/pages/productArea/[id].tsx
@@ -6,11 +6,7 @@ import ErrorMessage from '../../components/lib/error'
 import InnerContainer from '../../components/lib/innerContainer'
 import ProductAreaView from '../../components/productArea/productAreaView'
 import amplitudeLog from '../../lib/amplitude'
-import {
-  ProductAreaQuery,
-  useProductAreaQuery,
-} from '../../lib/schema/graphql'
-import { useGetProductAreas } from '../../lib/rest/productAreas'
+import { useGetProductArea, useGetProductAreas } from '../../lib/rest/productAreas'
 
 
 export interface PAItem {
@@ -57,7 +53,7 @@ export interface PAItem {
 
 export interface PAItems extends Array<PAItem> { }
 
-const isRelevantPA = (productArea: ProductAreaQuery['productArea']) => {
+const isRelevantPA = (productArea: any) => {
   return (
     productArea.dataproducts.length
     || productArea.stories.length
@@ -65,7 +61,7 @@ const isRelevantPA = (productArea: ProductAreaQuery['productArea']) => {
   )
 }
 
-const createPAItems = (productArea: ProductAreaQuery['productArea']) => {
+const createPAItems = (productArea: any) => {
   let items = []
   if (isRelevantPA(productArea)) {
     items.push({
@@ -78,19 +74,19 @@ const createPAItems = (productArea: ProductAreaQuery['productArea']) => {
     productArea.teams
       .slice()
       .filter(
-        (it) =>
+        (it: any) =>
           it.dataproducts.length > 0 ||
           it.stories.length > 0 ||
           it.insightProducts.length > 0
       )
-      .sort((a, b) => {
+      .sort((a: any, b: any) => {
         return (
           b.dataproducts.length +
           b.insightProducts.length -
           (a.dataproducts.length + a.stories.length + a.insightProducts.length)
         )
       })
-      .forEach((t) => {
+      .forEach((t: any) => {
         items.push({
           name: t.name,
           id: t.id,
@@ -111,28 +107,23 @@ interface ProductAreaProps {
 }
 
 const ProductArea = ({ id, productAreas }: ProductAreaProps) => {
-  const productAreaQuery = useProductAreaQuery({
-    variables: {
-      id,
-    },
-  })
+  const {productArea, loading, error} = useGetProductArea(id)
 
   useEffect(() => {
-    if (!productAreaQuery.loading && productAreaQuery.data) {
+    if (!loading && productArea) {
       const eventProperties = {
         sidetittel: 'poside',
-        title: productAreaQuery.data.productArea?.name,
+        title: productArea.name,
       }
       amplitudeLog('sidevisning', eventProperties)
     }
   })
 
-  if (productAreaQuery.error)
-    return <ErrorMessage error={productAreaQuery.error} />
-  if (productAreaQuery.loading || !productAreaQuery.data?.productArea)
+  if (error)
+    return <ErrorMessage error={error} />
+  if (loading || !productArea)
     return <Loader />
 
-  const productArea = productAreaQuery.data.productArea
   const paItems = createPAItems(productArea)
 
   return <ProductAreaView paItems={paItems} productAreas={productAreas} />