Document query option for useFetch

[manniL]

he documentation does not mention a "query" option, this should be updated and explained across the docs.

_Originally posted by @Aietes in #15359

[eulier1]

After reading the #8692 (comment). For simplicity I would suggest ( and I can do it) to add
query: { [string] : string | Ref<string } to useFetch API .
What do you think?.

[danielroe]

I believe that the document mentions that the options includes all options that can be passed to fetch, which includes a number of other options that are not mentioned explicitly.

[eulier1]

I'm afraid that is not to be the case, 😔 https://v3.nuxtjs.org/api/composables/use-fetch/

[Aietes]

The options not mentioned in the docs are inherited from ohmyfetch, that might be the reason they are not mentioned. The problem really is, that one of the main use cases for useFetch, that is using a query string when fetching data, is not accurately reflected in the documentation. I think this should be mentioned in Get Started - Data Fetching, and documented with examples in API - useFetch(). It should appear in the Type description, and more importantly in Params, much like body is documented. In addition an example lower on the page would help. I'm happy to contribute to the docs and write it, if that's possible.

[danielroe]

That would be great 😊

[Aietes]

I created a PR for the useFetch API.

I also found the place in the docs which clearly implies writing variables into the API URL should work: Getting Started - Data Fetching.

<script setup>
const page = ref(1);
const { data: users, pending, refresh, error } = await useFetch(() => `users?page=${page.value}&take=6`, { baseURL: config.API_BASE_URL }
);
function previous() {
  page.value--;
  refresh();
}
function next() {
  page.value++;
  refresh();
}
</script>

As per @danielroe this shouldn't work as laid out there, as the API URL will not update necessarily, or am I missing something?

[danielroe]

That works because the URL is a function.

[Aietes]

Got it. These are differentiations that are not intuitively clear to the less experienced user (like me).Thank you for the explanation, and all the great work!

[danielroe]

I think we could do a better job explaining them! Any ideas welcome :-)

[Aietes]

The Vue.js documentation is really great: lots of explanation and examples, which I believe work great for users. The Nuxt3 documentation is well structured, but could use more of the same type of detailed explanation with more examples in many places. I'm happy to contribute, although I'm not sure if I'm knowledgeable enough.