Type interface for client query should allow for reactive values

[adamdehaven]

Environment

• Operating System: Darwin
• Node Version: v20.14.0
• Nuxt Version: 3.12.2
• CLI Version: 3.12.0
• Nitro Version: 2.9.6
• Package Manager: pnpm@9.4.0
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

https://github.com/adamdehaven/nuxt-open-fetch/tree/chore/query-interface-error

Ensure you checkout the chore/query-interface-error branch.

If you run the playground with pnpm dev you'll notice I also added a <select> element at the top to demonstrate the reactivity works correctly; it's just an issue with the query[property] type interface(s).

Describe the bug

Nuxt's useFetch (the underlying implementation under use[client] allows for passing in reactive ref values for the query property:

// Example source: https://nuxt.com/docs/api/composables/use-fetch#usage

const param1 = ref('value1')
const { data } = await useFetch('/api/modules', {
  query: { 
    param1, // Reactive 
    param2: 'value2', 
  }
})

Clients generated by nuxt-open-fetch actually do work with this implementation; however, the type interface shows an error as the properties are typed only to the raw value.

Example

Utilizing the /playground/app.vue file from this repo, if I change the existing /pet/{petId} call to this:

const status = useState<'available' | undefined>(() => undefined)
const { data, execute } = await usePets('/pet/findByStatus', {
  immediate: false,
  query: {
    status, // This query points to a reactive variable
  },
})

I see the following TypeScript error:

However, you'll notice if you actually run the playground, not only is the example fully-functional, but it also correctly auto-watches the query.status property and runs the query again when the status ref changes.

If I change usePets to the native useFetch you'll notice there are no type errors, and the query.status property is correctly typed:

Additional context

Functionality is correct, but the type interfaces for query properties need to allow for both static and reactive values, just like the native useFetch.

Logs

No response

[adamdehaven]

@enkot I'm trying to figure out where the interface needs to be modified; glad to help if you want to take a look

[adamdehaven]

@enkot just bumping this and https://github.com/enkot/nuxt-open-fetch/pull/53 again if possible?

Let me know if I can provide more info

[enkot]

Hi @adamdehaven

Thank you for the issue! Should be fixed in https://github.com/enkot/nuxt-open-fetch/releases/tag/v0.9.4