Nuxt•7d ago

useFetch

why does useFetch not fetch my data from my nuxt api but $fetch does?

const fetchUser = async () => {
  const { data: userData } = await useFetch<CustomUser | null>("/api/auth/status", { headers });
  console.log(userData.value);
  user.value = userData.value;

  return user.value;
};

const fetchUser = async () => {
  const { data: userData } = await useFetch<CustomUser | null>("/api/auth/status", { headers });
  console.log(userData.value);
  user.value = userData.value;

  return user.value;
};

it just returns null every time but when i visit it myself, it works fine. useFetch isn't even hitting my api

2 Replies

kapa.ai•7d ago

Hi @ethan!. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, there are a few potential reasons why useFetch might not be fetching data from your Nuxt API while $fetch does. Let's explore these reasons: 1. Incorrect usage of useFetch: According to the Nuxt documentation (https://nuxt.com/docs/api/composables/use-fetch), useFetch is meant to be called directly in a setup function, plugin, or route middleware. In your code snippet, you're using it inside an async function, which might cause unexpected behavior. 2. Client-side execution: If your component is only rendered on the client-side (e.g., using client-only or with ssr: false), useFetch might not work as expected. As mentioned in a GitHub issue (https://github.com/nuxt/nuxt/issues/13805), when using useFetch with server: false, it may not await data fetching on initial client-side load. 3. Caching issues: useFetch has built-in caching mechanisms that might interfere with your expected behavior. As noted in another GitHub issue (https://github.com/nuxt/nuxt/issues/29364), the cache: 'no-store' option affects the fetch request but not how Nuxt subsequently stores the data. To resolve this issue, you could try the following: 1. Use useFetch directly in the setup function or a lifecycle hook:

const { data: userData } = await useFetch<CustomUser | null>("/api/auth/status", { 
  headers,
  immediate: true // Ensure it runs immediately
});

// Use a watch or watchEffect to react to changes
watch(userData, (newValue) => {
  user.value = newValue;
});

const { data: userData } = await useFetch<CustomUser | null>("/api/auth/status", { 
  headers,
  immediate: true // Ensure it runs immediately
});

// Use a watch or watchEffect to react to changes
watch(userData, (newValue) => {
  user.value = newValue;
});

2. If you need to call it from within a function, consider using $fetch instead:

const fetchUser = async () => {
  const userData = await $fetch<CustomUser | null>("/api/auth/status", { headers });
  console.log(userData);
  user.value = userData;

  return user.value;
};

const fetchUser = async () => {
  const userData = await $fetch<CustomUser | null>("/api/auth/status", { headers });
  console.log(userData);
  user.value = userData;

  return user.value;
};

3. If you still prefer using useFetch inside a function, you can try the approach mentioned in the GitHub issue (https://github.com/nuxt/nuxt/issues/13805):

const fetchUser = async () => {
  const fetch = useFetch<CustomUser | null>("/api/auth/status", { 
    headers,
    immediate: false 
  });
  await fetch.execute({ _initial: true });
  console.log(fetch.data.value);
  user.value = fetch.data.value;

  return user.value;
};

const fetchUser = async () => {
  const fetch = useFetch<CustomUser | null>("/api/auth/status", { 
    headers,
    immediate: false 
  });
  await fetch.execute({ _initial: true });
  console.log(fetch.data.value);
  user.value = fetch.data.value;

  return user.value;
};

Remember that useFetch is designed to work with Nuxt's server-side rendering and hydration process. If you're having issues, it might be worth reviewing your overall application structure and ensuring that you're using it in the appropriate context. For more detailed information on data fetching in Nuxt, you can refer to the Nuxt Data Fetching documentation (https://nuxt.com/docs/getting-started/data-fetching). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@495953543543521280> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

useFetch