Nuxt•4mo ago

useFetch return null sometimes

Hello! I have a call to my backend

const headers = useRequestHeaders(['authorization'])
const { data, status, error } = await useFetch('https://localhost:7225/mybackend', { headers,lazy: false, server:false})

 onMounted(() => {
      console.log("in onMounted")
      console.log("status: ", status.value)
      console.log("Error:", error.value)
      console.log("data: ", data.value)
      
      
    })

const headers = useRequestHeaders(['authorization'])
const { data, status, error } = await useFetch('https://localhost:7225/mybackend', { headers,lazy: false, server:false})

 onMounted(() => {
      console.log("in onMounted")
      console.log("status: ", status.value)
      console.log("Error:", error.value)
      console.log("data: ", data.value)
      
      
    })

And sometimes when I refresh the page it tells me data.value is null. When this happens Status is Pending and error is also null. I have no idea whats going on and could really use some guidance.

11 Replies

kapa.ai•4mo ago

Hi @clownshark5503. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue—where data.value is sometimes null, status is "pending", and error is null when using useFetch with { server: false }—is a known behavior in Nuxt 3's data fetching system. When you set server: false, the fetch will only run on the client, not during server-side rendering. On initial page load, especially with a hard refresh, the fetch does not start until after hydration is complete. This means that even if you await useFetch in <script setup>, data will remain null at that point. The request is triggered after hydration, so data.value will be null and status will be "pending" until the request completes. This is expected and documented behavior:

If you have not fetched data on the server (for example, with server: false), then the data will not be fetched until hydration completes. This means even if you await useFetch on client-side, data will remain null within <script setup> Docs > Getting-started > Data Fetching.

Additionally, if you use lazy: false (the default), the fetch will start as soon as possible, but with server: false, it still waits for hydration. If you want to handle the loading state, you should check status.value for "pending" and display a loading indicator until data is available. Key points: - With server: false, data fetching is deferred until after hydration. - data.value will be null and status "pending" until the request completes. - This is not a bug, but the intended behavior for client-only fetching. What you can do: - Handle the "pending" status in your template or logic to show a loading state. - If you need data to be available immediately on page load, consider removing server: false so the fetch runs during SSR. For more details, see the official documentation: Nuxt Data Fetching: useFetch. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

clownshark5503OP•4mo ago

@kapa.ai What hydration completes but there are mismatches?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- A "hydration completed but contains mismatches" warning in Nuxt (and Vue) means that the HTML rendered on the server does not exactly match what the client-side JavaScript expects when it takes over ("hydrates") the page. This can happen for several reasons, such as: - The initial state or data used on the server is different from what is used on the client. - Some code runs differently on the server and client (for example, using Date.now() or Math.random() during SSR). - Mutating props or shared data between server and client, causing the rendered output to differ. A concrete example from the knowledge sources is when using VeeValidate and Pinia in a Nuxt app: if you use Date.now() as an initial value in a ref, the value will be different between server and client, causing a hydration mismatch. The recommended fix is to initialize the ref with a static value (like 0) and set it in onMounted on the client. Another example is using Zod's refine for cross-field validation, which can also cause mismatches if not handled carefully. Removing or adjusting such logic resolved the hydration errors in the referenced case. The warning typically looks like this:

Hydration attribute mismatch on <input ...>
- rendered on server: (not rendered)
- expected on client: value=""

This means the input's value was different between server and client, leading to a mismatch after hydration. You should ensure that all data and logic that affect rendering are consistent between server and client to avoid these issues Hydration completed but contains mismatches using VeeValidate and Pinia in Nuxt. For more details and examples, see the linked Stack Overflow discussion. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

clownshark5503OP•4mo ago

@kapa.ai Can a hydration mismatch cause the problem I am having?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, hydration mismatches in Nuxt typically occur when the data or rendered output differs between the server and client during hydration. This can lead to warnings or errors about mismatched HTML, and may cause unpredictable UI behavior. However, the specific issue you described—where data.value is null, status is "pending", and error is also null when using useFetch with { server: false }—is not directly attributed to a hydration mismatch in the documentation or examples provided. Instead, this behavior is expected when using client-only fetching (server: false), as the data is not fetched until after hydration completes, leaving data.value as null and status as "pending" during the initial render. The knowledge sources do not explicitly state that a hydration mismatch would cause this specific problem, but rather that hydration mismatches are related to inconsistencies between server and client-rendered content, not to the timing of client-only data fetching Docs > Getting-started > Data Fetching. In summary:
There is no information in the knowledge sources that indicates a hydration mismatch would cause the problem you are experiencing with useFetch and data.value being null when using { server: false }. The described behavior is expected for client-only fetching and not a result of a hydration mismatch. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

johntanzer•4mo ago

Hey what is the issue? What do you expect it to be?

clownshark5503OP•4mo ago

The request to my backend returns as null when I refresh the page. Otherwise it is not null and I have my data from the database. I expected the output from the request to be my data from the database. The issue seems like it could be because I have a hydration mismatch that shows up when I refresh the page.

johntanzer•4mo ago

No. It’s because server is false

Gaming

Programming

useFetch return null sometimes

Did you find this page helpful?