ComputedOptions to accept object Ref

[IlyaSemenov]

Currently, ComputedOptions always expects an object:

https://github.com/enkot/nuxt-open-fetch/blob/5ed0c272e4ab8e4ec4dcc8b75ed556c44d0b55d5/src/runtime/clients.ts#L16-L18

That makes it inconvenient to provide e.g. computed query:

const { data } = useClientFetch("/objects", {
  query: {
    foo: computed(() => "foo"),
    bar: computed(() => "bar"),
    baz: computed(() => "baz"),
  },
})

It would be great if the following were possible:

const { data } = useClientFetch("/objects", {
  query: computed(() => ({ foo: "foo", bar: "bar", baz: "baz" })),
})

Ideally, this whole machinery should accept a generic WatchSource instead of Ref:

const { data } = useClientFetch("/objects", {
  query: () => ({ foo: "foo", bar: "bar", baz: "baz" }),
})

[IlyaSemenov]

For instance, compare to how villus handles that: https://villus.logaretm.com/guide/queries/#query-variables

[IlyaSemenov]

It's actually more important than I thought. It's not currently possible to use a dynamic query (with dynamic keys):

useClientFetch("/objects", {
  query: computed(() => getObjectWithDynamicKeys()), // Not working.
})

This is a very common scenario e.g. when requesting a list of objects with dynamic filters.

[adamdehaven]

I opened https://github.com/enkot/nuxt-open-fetch/issues/52 today. You can actually use a reactive source for the entire query object, or for each individual query property and it works out of the box; the TypeScript interface just doesn't support it.

See the example in the linked issue.