feat(nuxt): make useFetch options reactive

[danielroe]

🔗 Linked issue

resolves nuxt/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 } = await useAsyncData(
  '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