kilian Posts - Answer Overflow

kilian

•Created by kilian on 11/7/2024 in #help

Type Sharing between Nuxt and Hono

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.

1 replies

Gaming

Programming