Effect CommunityEC
Effect Community•13mo ago
mariaramos9488

TypeScript Error When Using `Effect.runPromise` with `getApiClient` in React Hook

Hi! 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, and I am not sure how to get it working. This is what I have right now:
import { useEffect, useState } from "react"
import { Effect } from "effect"
import { Api } from "@api"
import { getApiClient } from "../api/client"

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

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


The typescript error is on getApiClient and it says: Argument of type 'Effect<Api, never, HttpClient<HttpClientError, Scope>>' is not assignable to parameter of type 'Effect<Api, never, never>'

To my understanding, the issue is that Effect.runPromise only expects an Effect that has no requirements. How do I change this so I can run getApiClient and get the derived client through the hook?
Was this page helpful?