chore(heureka): codegen integration

Author: barsukov

apps/heureka-next/codegen.ts

@@ -0,0 +1,24 @@
+import { CodegenConfig } from "@graphql-codegen/cli"
+import * as dotenv from "dotenv"
+
+// Load environment variables from .env file
+dotenv.config()
+const schemaUrl = ""
+
+const config: CodegenConfig = {
+  schema: schemaUrl,
+  documents: "src/**/*.graphql",
+
+  generates: {
+    "src/generated/graphql.tsx": {
+      plugins: ["typescript", "typescript-operations", "typescript-react-apollo"],
+      config: {
+        withHooks: true,
+        withHOC: false,
+        withComponent: false,
+      },
+    },
+  },
+}
+
+export default config

apps/heureka-next/package.json

@@ -17,6 +17,7 @@
     "dev": "vite",
     "build": "vite build",
     "build:static": "vite build --mode static",
+    "generate:types": "graphql-codegen --config codegen.ts",
     "serve": "vite preview",
     "test": "vitest run",
     "lint": "eslint",
@@ -31,6 +32,11 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
+    "@apollo/client": "^3.11.10",
+    "@graphql-codegen/cli": "^5.0.3",
+    "@graphql-codegen/typescript": "^4.1.2",
+    "@graphql-codegen/typescript-operations": "^4.4.0",
+    "@graphql-codegen/typescript-react-apollo": "^4.3.2",
     "@cloudoperators/juno-config": "*",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",

apps/heureka-next/src/App.tsx

@@ -7,16 +7,21 @@ import React from "react"
 import { AppShellProvider } from "@cloudoperators/juno-ui-components"
 import { ErrorBoundary } from "./components/ErrorBoundary"
 import { Shell } from "./components/Shell"
+import { ApolloProvider } from "@apollo/client"
+import { client } from "./apollo-client"
 
 export type AppProps = {
   theme?: "theme-dark" | "theme-light"
   embedded?: boolean
 }
 
 export const App = (props: AppProps) => (
-  <AppShellProvider theme={`${props.theme ? props.theme : "theme-dark"}`}>
-    <ErrorBoundary>
-      <Shell {...props} />
-    </ErrorBoundary>
-  </AppShellProvider>
+  <ApolloProvider client={client}>
+    <AppShellProvider theme={`${props.theme ? props.theme : "theme-dark"}`}>
+      <ErrorBoundary>
+        <Shell {...props} />
+      </ErrorBoundary>
+    </AppShellProvider>
+    <App />
+  </ApolloProvider>
 )

apps/heureka-next/src/apollo-client.ts

@@ -0,0 +1,6 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client"
+
+export const client = new ApolloClient({
+  uri: "",
+  cache: new InMemoryCache(),
+})

apps/heureka-next/src/components/Services/Services.tsx

@@ -4,5 +4,19 @@
  */
 
 import React from "react"
+import { useGetServicesQuery } from "../../generated/graphql"
 
-export const Services = () => <div>render services here...</div>
+export const Services = () => {
+  const { data, loading, error } = useGetServicesQuery()
+  if (loading) return <p>Loading...</p>
+  if (error) return <p>Error</p>
+
+  return (
+    <div>
+      {data?.Services?.edges?.map((service) => {
+        console.log("TEST NAME", service?.node.ccrn)
+        return <p>{service?.node.ccrn}</p>
+      })}
+    </div>
+  )
+}