fix: add apiClient to context and pass to query fn

Author: tristandubbeld

src/bin/ui/Dashboard.tsx

@@ -21,10 +21,12 @@ function useTerminalSize() {
 
 // Component to open a sandbox by ID
 export function Dashboard() {
+  const { apiClient } = useSDK();
+  
   // Poll getRunningVms API every 2 seconds
   const runningVmsQuery = useQuery({
     queryKey: ["runningVms"],
-    queryFn: getRunningVms,
+    queryFn: () => getRunningVms(apiClient),
   });
 
   const [sandboxId, setSandboxId] = useState("");
@@ -103,11 +105,11 @@ const Sandbox = memo(
   }) => {
     const sandboxQuery = useQuery({
       queryKey: ["sandbox", id],
-      queryFn: () => getSandbox(id),
+      queryFn: () => getSandbox(apiClient, id),
     });
     const runningStateRef = useRef(runningState);
 
-    const sdk = useSDK();
+    const { sdk, apiClient } = useSDK();
 
     // Only two states: RUNNING or IDLE
     const [sandboxState, setSandboxState] = useState<

src/bin/ui/sdkContext.tsx

@@ -1,13 +1,28 @@
 import * as React from "react";
 import { createContext, useContext } from "react";
 import { CodeSandbox } from "@codesandbox/sdk";
+import { createApiClient } from "../../utils/api";
+import { Client } from "@hey-api/client-fetch";
+import { getInferredApiKey } from "../../utils/constants";
+import { instrumentedFetch } from "../utils/sentry";
 
 const sdk = new CodeSandbox();
 
-export const SDKContext = createContext<CodeSandbox>(sdk);
+const apiKey = getInferredApiKey();
+const apiClient: Client = createApiClient(apiKey, {}, instrumentedFetch);
+
+export const SDKContext = createContext<{ sdk: CodeSandbox; apiClient: Client }>({
+  sdk,
+  apiClient,
+});
+
 
 export const SDKProvider = ({ children }: { children: React.ReactNode }) => {
-  return <SDKContext.Provider value={sdk}>{children}</SDKContext.Provider>;
+  return (
+    <SDKContext.Provider value={{ sdk, apiClient }}>
+      {children}
+    </SDKContext.Provider>
+  );
 };
 
 export function useSDK() {