useFetch query params

[extrem7]

Is there any way to pass reactive query parameters for GET request? Or using computed url is the only way?

[curtgrimes]

I think using a computed like this is probably one good way to pass reactive query parameters in for a GET request. In this demo you can change the input value and see that new URL gets fetched immediately:

Demo: https://stackblitz.com/edit/vue3-script-setup-with-vite-ppshjm?file=src%2FApp.vue

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useFetch, useUrlSearchParams } from '@vueuse/core';

const foo = ref('12345');

const url = computed(() => {
  const _url = new URL('https://httpbin.org/get');
  _url.search = new URLSearchParams({
    foo: foo.value,
  });
  return _url.toString();
});

const { data, isFetching } = useFetch(url, { refetch: true });
</script>

<template>
  <label>Change value: <input type="text" v-model="foo" autofocus /></label>
  <p>
    <strong>URL:</strong> <a :href="url" target="_blank">{{ url }}</a>
  </p>
  <p><strong>Data:</strong> {{ isFetching ? 'Loading...' : data }}</p>
</template>

[wheatjs]

Since the URL is reactive I think the best option is a computed like you said. Maybe we could have a reactive url builder function. Something like useURL that could be used with useFetch. useFetch is already pretty complex as is, I'd like to avoid making it even more complex.

I'm thinking something like this. Might make a PR for this later 🤔

<script lang="ts">
const query = ref('')
const url = useURL('https://example.com', () => { query: query.value })
const { data, isFetching } = useFetch(url, { refetch: true })
</script>

<template>
  <input type="search" v-model="query" />
  <div>{{ data }}</div>
</template>

[curtgrimes]

Something like that might be nice. It looks like @mskr mentioned in #2066 (comment) that they might be interested in doing something similar, so it looks like there might be some overlap between these two efforts.

[mskr]

Yes I am interested. I currently have a version of useURLSearchParams that represents URL.pathname as reactive array.

const params = useURLSearchParams()
params[0] = 'users'
params[1] = 'mskr'

would result in https://example.com/users/mskr. It always directly modifies window.location, so that would need to be changed for a unified useURL function.

[mskr]

I now have a version where the parameters of each mode can be present at the same time, because an ordinary URL can contain all at the same time.