UseFetch() calling multiple request, only the last data is fetched and $fetch send requests twice

Environment

rc-13 node-18

Reproduction

//composable

const myfetch = async (url,options,emits) => {
  const { data, pending, error, refresh } = await useFetch(url, {
 
    ...options,
  baseURL: useRuntimeConfig().API_URL, 
  initialCache: false,
  headers: new Headers({  'authorization': (process.client)?localStorage.getItem("token"):''}),
  onResponse ({ response }) {
  return response._data
  },
  onResponseError ({ response }) {
  return response._data
  }
  })
  const resData = data.value
 
  return resData
  }

//component 1

<script setup>
getAllItems();
async function getAllItems() {
    let response = await myfetch('/article/artPosts?' +
        'page=' + page.value + '&' +
        'artPostGroup=' + artPostGroup.value + '&' +
        'limit=' + limit.value, {
            method: 'GET'
        });
    if (response.data)
        list.value = response.data.docs;
    pages.value = response.data.pages;
}
</script>

//component 2

<script setup>
getAllItems();
async function getAllItems() {
    let response = await myfetch('/store/storeCourses?' +
        'page=' + page.value + '&' +
        'storeCourseGroup=' + storeCourseGroup.value + '&' +
        'limit=' + limit.value, {
            method: 'GET'
        });
    if (response.data)
        list.value = response.data.docs;
    pages.value = response.data.pages;
}
</script>

//home.vue

<div>
<component1></component1>
<component2></component2>
</div>

Describe the bug

the bug is here… in the page load: response of component1 is the same as response of component2…

when i use $fetch instead of useFetch, it works good but it makes another problem for me…

on refreshing page,it send a request twice to server

Additional context

how can i write function in composables?

Logs

No response

[mittci]

i read this and it works fine 😃 thank you @Maxp777

import { hash } from ‘ohash’ and send key with this code ‘key’ : hash([‘api-fetch’, url, params]),

I use url + JSON.stringify(params) for useAsyncData,, but with hash look’s nice

[mittci]

try to use a unique key (include in it query params for example)

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 static code location where useAyncData is used.