Nuxt3 useFetch sends request only once

user_19163046 0
Viewed 924
<script setup lang="ts">

const loadPost = () => {
  console.log('load')
  const { data, pending, error, refresh } = useFetch(
    'https://jsonplaceholder.typicode.com/posts',
    {
      method: 'POST',
      body: {
        title: 'foo',
        body: 'bar',
        userId: 1,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
  console.log(data)
}
</script>

<template>
  <div class="max-w-xs space-y-4 mx-auto mt-4">
      <button @click.prevent="loadPost">Load post</button>
  </div>
</template>

enter image description here

enter image description here

After clicking on the load button, I see every time the request is processed through the console log, but I do not see a new request in the network chrome devtools, I need to receive a response from the server every time, how can I do this?

Note: If I use a regular fetch(), then the request is sent every time, as it should be

my nuxt version - 3.0.0-rc.1

nuxtjs3 nuxt.js vue.js
3 Answers

Thanks! Solved by adding param initialCache: false

useFetch('https://reqres.in/api/users?page=2?delay=1', { initialCache: false })
user_191630460

If you want to re-fetch the data, use the refresh() method returned from useFetch():

<script setup lang="ts">
const { data, pending, error, refresh } = await useFetch('https://reqres.in/api/users?page=2?delay=1')

const loadPost = () => {
  refresh()
}
</script>

demo

user_62771510

Watch out! you need a key. In you don't provide one, will generate it from the URL. This might not get you the result you expect. Generate a different key if the data will change.

Here is in the docs

Options (from useAsyncData): key: a unique key to ensure that data fetching can be properly de-duplicated across requests, if not provided, it will be generated based on the url and fetch options.

user_12283410
Related