Hono•16mo ago

Type Sharing between Nuxt and Hono

❗unsolved

We have a Monorepo with a Nuxt 3 frontend and a Hono backend.
Now we are unsure on what's the best approach to type our API calls.

Our API request look something like this currently

const { data: questionData } = await useFetch<Array<SurveyResponse>>("/questions", {
    query: { id: activeQuestionId, project: "1" },
    baseURL: env.public.apiBaseUrl,
    method: "get",
});

const { data: questionData } = await useFetch<Array<SurveyResponse>>("/questions", {
    query: { id: activeQuestionId, project: "1" },
    baseURL: env.public.apiBaseUrl,
    method: "get",
});

SurveyResponse is currently a manually typed interface in the frontend, and we want to have this type inference automatically

how would you integrate something like the hono/client with this?

we thought about a composable like this

import type { AppType } from "@monorepo/backend";
import { hc } from "hono/client";

export function useApiClient() {
    const env = useRuntimeConfig();
    const apiBaseUrl = env.public.NUXT_PUBLIC_API_BASE_URL as string;

    const apiClient = hc<AppType>(apiBaseUrl);

    return apiClient;
}

import type { AppType } from "@monorepo/backend";
import { hc } from "hono/client";

export function useApiClient() {
    const env = useRuntimeConfig();
    const apiBaseUrl = env.public.NUXT_PUBLIC_API_BASE_URL as string;

    const apiClient = hc<AppType>(apiBaseUrl);

    return apiClient;
}

but afaik hono/client is not SSR-friendly yet?

We wouldn't be reluctant to something like a separate API Types package which'd had to be built manually, but we are unsure about how to approach this with Hono.

I hope someone can help with this as there isn't any helpful information on this out there.

Hono•16mo ago

kilian

Type Sharing between Nuxt and Hono

❗unsolved

We have a Monorepo with a Nuxt 3 frontend and a Hono backend.
Now we are unsure on what's the best approach to type our API calls.

Our API request look something like this currently

const { data: questionData } = await useFetch<Array<SurveyResponse>>("/questions", {
    query: { id: activeQuestionId, project: "1" },
    baseURL: env.public.apiBaseUrl,
    method: "get",
});

const { data: questionData } = await useFetch<Array<SurveyResponse>>("/questions", {
    query: { id: activeQuestionId, project: "1" },
    baseURL: env.public.apiBaseUrl,
    method: "get",
});

import type { AppType } from "@monorepo/backend";
import { hc } from "hono/client";

export function useApiClient() {
    const env = useRuntimeConfig();
    const apiBaseUrl = env.public.NUXT_PUBLIC_API_BASE_URL as string;

    const apiClient = hc<AppType>(apiBaseUrl);

    return apiClient;
}

import type { AppType } from "@monorepo/backend";
import { hc } from "hono/client";

export function useApiClient() {
    const env = useRuntimeConfig();
    const apiBaseUrl = env.public.NUXT_PUBLIC_API_BASE_URL as string;

    const apiClient = hc<AppType>(apiBaseUrl);

    return apiClient;
}

Type Sharing between Nuxt and Hono

Similar Threads

Type Sharing between Nuxt and Hono

Similar Threads

Similar Threads

Similar Threads