feat: Add Apollo Client integration to web-dashboard with GraphQL support

- Add @apollo/client ^4.1.9 and graphql ^16.10.0 dependencies to package.json
- Add apollo-client.ts with ApolloClient configuration, HTTP link to API server, and auth link for token-based authentication
- Add Providers component wrapping children with ApolloProvider
- Wrap Sidebar and main content with Providers in root layout
- Configure cache-and-network and network-only fetch policies for queries and mutations

apps/web-dashboard/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Geist, Geist_Mono, Inter } from "next/font/google";
 import "./globals.css";
 import { cn } from "@/lib/utils";
 import { Sidebar } from "@/components/sidebar";
+import { Providers } from "./providers";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
@@ -32,8 +33,10 @@ export default function RootLayout({
       className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", inter.variable)}
     >
       <body className="min-h-full flex">
-        <Sidebar />
-        <main className="flex-1 overflow-auto">{children}</main>
+        <Providers>
+          <Sidebar />
+          <main className="flex-1 overflow-auto">{children}</main>
+        </Providers>
       </body>
     </html>
   );

apps/web-dashboard/src/app/providers.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { ApolloProvider } from '@apollo/client';
+import { apolloClient } from '@/lib/apollo-client';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <ApolloProvider client={apolloClient}>{children}</ApolloProvider>;
+}

apps/web-dashboard/src/lib/apollo-client.ts

@@ -0,0 +1,54 @@
+import { ApolloClient, InMemoryCache, createHttpLink, from } from '@apollo/client';
+import { setContext } from '@apollo/client/link/context';
+
+// GraphQL API endpoint
+const httpLink = createHttpLink({
+  uri: process.env.NEXT_PUBLIC_API_SERVER_URL || 'http://localhost:8080/v1/graphql',
+});
+
+// Auth link to add authentication token to requests
+const authLink = setContext((_, { headers }) => {
+  // Get the authentication token from local storage if it exists
+  const token = localStorage.getItem('auth_token');
+  
+  return {
+    headers: {
+      ...headers,
+      authorization: token ? `Bearer ${token}` : '',
+    },
+  };
+});
+
+// Create Apollo Client instance
+export const apolloClient = new ApolloClient({
+  link: from([authLink, httpLink]),
+  cache: new InMemoryCache(),
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'cache-and-network',
+    },
+    query: {
+      fetchPolicy: 'network-only',
+    },
+    mutate: {
+      fetchPolicy: 'network-only',
+    },
+  },
+});
+
+// GraphQL queries and mutations can be defined here
+// Example:
+/*
+import { gql } from '@apollo/client';
+
+export const GET_SERVICES = gql`
+  query GetServices {
+    services {
+      id
+      name
+      status
+      health
+    }
+  }
+`;
+*/