Get a client from an API using effect-ts platform

The following is a conversation from the effect-ts discord 2024-12-26

I am trying to derive a client from an API I created using effect/platform . I want to be able to use the client in my React frontend. This is the code I have for deriving it:

import { HttpApiClient, HttpClient } from "@effect/platform";
import { Effect } from "effect";
import { Api } from "@api";

export const getApiClient: Effect.Effect<Api, never, HttpClient.HttpClient> =
  Effect.gen(function* () {
    const client = yield* HttpApiClient.make(Api, {
      baseUrl: "/api",
    });

    return client;
  });

I am trying to create a hook that will get the resulting client but I am getting typescript errors. I had to provide FetchHttpClient.layer to apiClient, like this:

import { useEffect, useState } from "react";
import { Effect } from "effect";
import { FetchHttpClient } from "@effect/platform";
import { getApiClient } from "../api/client";

type Client = Effect.Effect.Success<typeof getApiClient>;

export function useApiClient() {
  const [client, setClient] = useState<Client | null>(null);

  useEffect(() => {
    const program = Effect.provide(getApiClient, FetchHttpClient.layer);
    Effect.runPromise(program)
      .then(setClient)
      .catch((error: unknown) => {
        Effect.logError(`API Client Error: ${String(error)}`);
      });
  }, []);
  return client;
}

as seen in the effect discord here