nuxt/bridge

useLazyFetch does not work with reactive values

Closed this issue · 5 comments

Environment

  • Operating System: Darwin
  • Node Version: v18.19.1
  • Nuxt Version: 2.17.3
  • CLI Version: 3.10.1
  • Nitro Version: 2.9.1
  • Package Manager: npm@10.4.0
  • Builder: webpack
  • User Config: bridge, target, ssr, nitro, head, app, css, plugins, components, imports, buildModules, publicRuntimeConfig, env, router, modules, loading, dayjs, build, serverHandlers, devServerHandlers, devServer, typescript
  • Runtime Modules: nuxt-validate@1.0.1, @nuxtjs/i18n@7.3.1, nuxt-svg-loader@1.2.0, nuxt-uid-module@0.2.0, nuxt-vuex-localstorage@1.3.0, @nuxtjs/gtm@2.4.0, nuxt-polyfill@1.0.3, @nuxtjs/axios@5.13.6
  • Build Modules: (), @nuxtjs/dayjs@1.4.1, @nuxt/bridge@3.1.0

Reproduction

Nuxt3 working example

Nuxt + bridge not working

Describe the bug

I want to use reactive values in useLazyFetch function, but nuxt bridge seems to not support this.

`const username = ref("");
const password = ref("");

const queryParams = computed(() => ({
username: username.value,
password: password.value,
}));

const { data, pending, error, refresh } = useLazyFetch("/login", {
query: queryParams
});`

Snímek obrazovky 2024-03-08 v 6 24 11

I tried to use not computed, but refs. Seems to work => values are updated after every send request, but it sends not the value itself but object {value: 'value of input'}

`const username = ref("");
const password = ref("");

const { data, pending, error, refresh } = useLazyFetch("/login", {
query: {
username: username,
password: password,
}
});`

Snímek obrazovky 2024-03-08 v 6 23 56

In nuxt3 version all working fine, so there must a bug in bridge version of function useLazyFetch.

Additional context

No response

Logs

logs are in reproduction links

hey @wattanx thank you for your quick response to this issue. When do you think your pull request will be resolved? It seems good and I would love to start using this :)

This is a big change and we are checking it carefully. It will take a little longer to release.

@wattanx, I found a BUG, you fixed it, all are happy, but not untill this ticket is merged and closed. I dont understand why it already isnt..
How can developers use funkction useLazyFetch if it is a buggy and not working? Isnt it an important bug? Fetching is the most often functionality fot nuxt apps.. Guys please check this out and make merge happen please :)

If you want a quick fix, use patch-package.
https://www.npmjs.com/package/patch-package

Please read the following statement as to why we do not merge immediately.
https://github.com/pi0/tired-maintainer?tab=readme-ov-file#this-pr-looks-good-to-me-or-tell-me-what-to-do

Thank you! I solved my issue by pnpm patch and all working nice.