feat(nuxt): make useFetch options reactive

[danielroe]

🔗 Linked issue

resolvesnuxt/nuxt#14342

❓ 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

This allows passing refs/computed properties as fetch options (e.g. for a param value), and automatically refetching when these values change.

📝 Checklist

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

[codesandbox]

Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	a58e0ee
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/6351df7e576b4e0008fc5255
😎 Deploy Preview	https://deploy-preview-8374--nuxt3-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[JorenSynaeveTM]

Hi Daniel. I don't know where to respond, so I'm posting my question here. I'm having issues getting this to work. I have the following code in my page:

...
const page = computed(() => {
return parseInt(useRoute().query.page) || 1;
});
/* This part worked with the pagination as expected
const { pending, data } = useAsyncData(
"test",
() =>
$fetch(
`${useRuntimeConfig().public.API_BASE_URL}/api/productlist?page=${
page.value
}&includeUser=true`,
{
headers: {
Authorization: `Bearer ${useCookie("apiToken").value}`,
},
}
),
{
watch: [page],
}
);
*/
/* This part does not work */
const { pending, data } = myAsyncData(
"test",
`/api/productlist?page=${page.value}&includeUser=true`,
{},
{
watch: [page],
}
);
...

When trying to extract this logic to a custom composable for better error handling and adding a bearer token, it stopped working. Here is my custom composable:

import { AsyncDataOptions, UseFetchOptions } from "nuxt/dist/app/composables";
export const myAsyncData = (key: string, url: string, fetchOptions?: UseFetchOptions<unknown>, asyncDataOptions?: AsyncDataOptions<unknown>) => {
const config = useRuntimeConfig();
return useAsyncData(key, () =>
$fetch(
config.public.API_BASE_URL + url,
{
...fetchOptions,
async onRequest({ request, options }) {
const token = useCookie("apiToken");
if (token.value) {
options.headers = {
...options.headers,
Authorization: `Bearer ${token.value}`,
};
}
console.log("[fetch request]");
}
}
),
{
...asyncDataOptions
});
};

Could you please take a look on why this is not working?
Ps: If I have to move this comment somewhere else, please tell me to do so.

[danielroe]

yes, this is probably not the right place. if you have a follow-up question, would you open a discussion instead?

you should instead do something like this:

const{ pending, data }=awaituseAsyncData('test','/api/productlist',{params: {
page,includeUser: true}})

... and that should work, automatically watching page. You can pass params though and it should also work with myAsyncData.

[yashika]

awesome!

[AaronConlon]

Waited a long time.

[AaronConlon]

Thanks bro