Argument of type 'Ref<string>' is not assignable to parameter of type 'RequestInfo' when using fetch

chovy 0
Viewed 15

Trying to do a simple fetch in vue with typescript:

Compiled with problems:

ERROR in src/components/AuthKeysForm.vue:149:33

TS2345: Argument of type 'Ref<string>' is not assignable to parameter of type 'RequestInfo'.
  Type 'Ref<string>' is missing the following properties from type 'Request': cache, credentials, destination, headers, and 17 more.
    147 |       audience,
    148 |       async onSubmit() {
  > 149 |         const res = await fetch(keysUrl);
        |                                 ^^^^^^^
    150 |         const keys = (await res.json())?.keys;
    151 |
    152 |         console.log('submit', type, keysUrl, issuer, audience, keys);

Not sure how to get this properly typed.

fetch typescript vue.js
1 Answers

Vue refs have a value property to access the current value of the ref, and fetch (one of its overloads) takes a string (the URL), so you just need to use:

const res = await fetch(keysUrl.value);

Source: https://vuejs.org/api/reactivity-core.html#ref

caTS0
Related