Domme Posts - Answer Overflow

Domme

•Created by Domme on 9/26/2024 in #❓・help

Why do I get a hydration error, and how to fix this?

I have a plugin setup-state.ts

import type {EnvVars} from "~/datatypes/envvars";
import {useEnvConfigObjectState} from "~/composables/state";

export default defineNuxtPlugin(async nuxtApp => {
    const config = useEnvConfigObjectState();
    let url ="https://URL/api/public/envs";
    const data = await useAsyncData('envs' + url, () => $fetch(url));
    config.setData(data.data.value as EnvVars);
});

import type {EnvVars} from "~/datatypes/envvars";
import {useEnvConfigObjectState} from "~/composables/state";

export default defineNuxtPlugin(async nuxtApp => {
    const config = useEnvConfigObjectState();
    let url ="https://URL/api/public/envs";
    const data = await useAsyncData('envs' + url, () => $fetch(url));
    config.setData(data.data.value as EnvVars);
});

And I set a state with the return value from my backend

export function useEnvConfigObjectState() {
    return useObjectState<EnvVars>('env-config');
}

export function useObjectState<T>(key: string, initFn?: () => T) {
    const data = useState<T>(key, initFn);
    const firstFetched = useState<boolean>(`${key}-first-fetch`, () => false);

    const setData = (d: T) => {
        firstFetched.value = true;
        data.value = d;
    };

    return { data, setData, firstFetched};
}

export function useEnvConfigObjectState() {
    return useObjectState<EnvVars>('env-config');
}

export function useObjectState<T>(key: string, initFn?: () => T) {
    const data = useState<T>(key, initFn);
    const firstFetched = useState<boolean>(`${key}-first-fetch`, () => false);

    const setData = (d: T) => {
        firstFetched.value = true;
        data.value = d;
    };

    return { data, setData, firstFetched};
}

No matter what I try, I always get a hydration error

3 replies

NNuxt

•Created by Domme on 9/20/2024 in #❓・help

Request data in a plugin before sending the files to the client

Currently I get this error in my client Hydration completed but contains mismatches. My plugin:

export default defineNuxtPlugin(async nuxtApp => {
    if (!import.meta.server) {
        return;
    }
    try {
        const envsState = useEnvsStateObjectState();
        const {data} = await useFetch<EnvVars>(`api/public/envs`, {server: false});
        envsState.setData(data.value as EnvVars);
    } catch (error) {
        console.error('error fetching envs', error);
    }
});

export default defineNuxtPlugin(async nuxtApp => {
    if (!import.meta.server) {
        return;
    }
    try {
        const envsState = useEnvsStateObjectState();
        const {data} = await useFetch<EnvVars>(`api/public/envs`, {server: false});
        envsState.setData(data.value as EnvVars);
    } catch (error) {
        console.error('error fetching envs', error);
    }
});

What I basically want to achieve is that the endpoint is called before data is sent to the client. The client should not know that this endpoint is getting called upon sending the files. When removing the server check, it seems that 2 calls are getting made. Once on the server and another time on the client. Any idea how I can achieve this? Btw. My backend is a java application and I'm not using the nuxt backend server folder

2 replies

NNuxt

•Created by Domme on 9/18/2024 in #❓・help

Request env variables on application startup from backend

Hi, I want to request environment variables once my frontend loads. I have a java backend where all the configuration is located. Is there any specific hook available which I could use to load the env variables or is the best option to just send a request in my app.vue entry point?

19 replies

Gaming

Programming