Add ApiClient and call it

src/api/ApiClient.ts

@@ -0,0 +1,21 @@
+export interface Foo {
+	name: string;
+}
+
+export class ApiClient {
+	private readonly url: string;
+	constructor( opts: { url: string } ) {
+		this.url = opts.url;
+	}
+
+	async getFoo(): Promise< Foo > {
+		return new Promise( ( resolve ) => {
+			try {
+				resolve( { name: 'foo' } );
+			} catch ( error ) {
+				console.log( error );
+				throw error;
+			}
+		} );
+	}
+}

src/ui/session/ViewSession.tsx

@@ -1,14 +1,33 @@
 import { useSessionContext } from '@/ui/session/SessionProvider';
+import { ApiClient, Foo } from '@/api/ApiClient';
+import { useEffect, useState } from 'react';
 
 export function ViewSession() {
 	const { session, playgroundInfo } = useSessionContext();
 
+	const apiClient = playgroundInfo?.url
+		? new ApiClient( { url: playgroundInfo?.url } )
+		: null;
+
+	const [ foo, setFoo ] = useState< Foo >();
+	useEffect( () => {
+		if ( ! apiClient ) {
+			return;
+		}
+		const getFoo = async () => {
+			const result = await apiClient?.getFoo();
+			setFoo( result );
+		};
+		void getFoo();
+	}, [ playgroundInfo ] );
+
 	return (
 		<>
 			<div>view session: { session.id }</div>
 			{ playgroundInfo?.url ? (
 				<div>url: { playgroundInfo.url }</div>
 			) : null }
+			{ foo ? <div>{ foo.name }</div> : null }
 		</>
 	);
 }