Improving Ergonomics of Data Fetching in Effect-Based API Integration

export class ApiClient extends Effect.Service<ApiClient>()('ApiClient', {
    dependencies: [FetchHttpClient.layer],
    effect: Effect.gen(function* () {
        const apiServerUrl = yield* Config.url('API_SERVER_URL')
        return yield* HttpApiClient.make(Api, { baseUrl: apiServerUrl })
    }),
}) {}
// ...
const MainLayer = Layer.mergeAll(ApiClient.Default)
export const ServerRuntime = ManagedRuntime.make(MainLayer)
// ...
const fetchData = createServerFn().handler(async () => {
    return ServerRuntime.runPromise(
        Effect.gen(function* () {
            const api = yield* ApiClient
            return yield* api.Things.getAll()
        }),
    )
})

export const Route = createFileRoute('/')({
    component: RouteComponent,
    loader: async () => fetchData(),
})

function RouteComponent() {
    const data = Route.useLoaderData()
    // ...
}