🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The current version of useFetch, only allowed a static value for a request meaning we couldn't assign a dynamic value to the request URL.

This PR uses a computed value and watch option of useAsyncData (#3722) to automatically trigger refresh whenever request value changes. Main advantage over useAsyncData+fetch is that it automatically tracks dependencies after hydration since we can safely evaluate computed value on client-side without actually evaluating handler and making a double fetch.

This PR also improves key generation using unjs/ohash that can also safely hash function values as well for automatically generating fetch key. (however an explicit key is better idea!)

Previously: (still possible to directly pass a value)

const { data } = await useFetch('/api/hello')

New usage:

const count = ref(1)
const { data } = await useFetch(() => `/api/hello/${count.value}`)

Next steps:

As is also visible in the example demo, it is not possible to assign dynamic options to ohmyfetch. Therefore options like params cannot be dynamic. We could allow computed property, to support { url, ...options } in addition of current types (url ref, string, Request)

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.