Vue 3 async fetched data won't update on locale change

Question

I have external .js file created exactly for fetching data from backend based on website locale. Here is the code:

import { ref } from "vue";

export function fetchData(section, key) {
  // GET request using fetch with error handling and headers
  const headers = {
    method: "GET",
    headers: { "Content-Type": "application/json" },
  };
  const fetchedData = ref(null);

  fetch(
    "http://localhost:4000/api/" + section + "/?api-key=" + key,
    headers
  )
    .then(async (response) => {
      const data = await response.json();

      // check for error response
      if (!response.ok) {
        // get error message from body or default to response statusText
        const error = (data && data.message) || response.statusText;

        return Promise.reject(error);
      }

      fetchedData.value = data;
    })
    .catch((error) => {
      console.error("There was an error!", error);

      return error;
    });

  return fetchedData;
}

And this is code from .vue file where I calling fetchData function:

<script setup>
import { fetchData } from "../../utils/universal-fetch";
import { ref, watch } from "vue";
import { useStore } from "../../stores/language.js";
import { useI18n } from "vue-i18n";
import AOS from "aos";

const store = useStore();
const { locale } = useI18n({ useScope: "global" });

const fetchedData = ref(fetchData("homeFirstSection", store.getLanguage));

AOS.init();

watch(
  () => locale.value,
  () => {
    fetchedData.value = fetchData("homeFirstSection", store.getLanguage);
  }
);
</script>

When page is created/refreshed, fetchData function fetch data from backend correctly. The problem which I'm trying to solve is that, when I change a locale, watcher automatically detects that, locale was changed and variable fetchedData should be updated based on choosen locale.

Problem

Thanks!

Answer 1

I found a problem. Here is code:

export function async fetchData(section, key) { // Added async
  // GET request using fetch with error handling and headers
  const headers = {
    method: "GET",
    headers: { "Content-Type": "application/json" },
  };
  let fetchedData = null;

  await fetch( // Added await
    "http://localhost:4000/api/" + section + "/?api-key=" + key,
    headers
  )
    .then(async (response) => {
      const data = await response.json();

      // check for error response
      if (!response.ok) {
        // get error message from body or default to response statusText
        const error = (data && data.message) || response.statusText;

        return Promise.reject(error);
      }

      fetchedData = data;
    })
    .catch((error) => {
      console.error("There was an error!", error);

      return error;
    });

  return fetchedData;
}

In my external .js file I was missing one more async await.

<script setup>
import { fetchData } from "../../utils/universal-fetch";
import { ref, watch } from "vue";
import { useStore } from "../../stores/language.js";
import { useI18n } from "vue-i18n";
import AOS from "aos";

const store = useStore();
const { locale } = useI18n({ useScope: "global" });

const fetchedData = ref(null);

fetchData("agreementsFirstSection", store.getLanguage).then(
  (data) => (fetchedData.value = data)
); // Added .then

AOS.init();

watch(
  () => locale.value,
  () => {
    fetchData("agreementsFirstSection", store.getLanguage).then(
  (data) => (fetchedData.value = data)
); // Added .then instead of directly assign
  }
);
</script>

And in .vue file I was missing .then insted of directly assigning value to variable. I added comments to code to compare changes before and after.

Problem solved