search

DamianOsipiuk / vue-query

Hooks for fetching, caching and updating asynchronous data in Vue
https://vue-query.vercel.app/
MIT License
1.11k stars 48 forks source link

vue-query hooks can only be used inside setup() function (nuxt-bridge) #244

Closed AndreyYolkin closed 2 years ago

AndreyYolkin commented 2 years ago

Reproduction

https://github.com/AndreyYolkin/nuxt-bridge-vue-query

https://stackblitz.com/github/AndreyYolkin/nuxt-bridge-vue-query?file=pages%2FvueQuery.vue (plugin is loading into application only after editing nuxt.config)

Description

In application built with Nuxt 2 bridge I use the same technique as in Nuxt 3 example. And everything is working well until I refresh the page. Then vue-query is falling down with message stated in issue name.

Extras

I think I need to tag @danielroe, because I cannot reproduce this in Nuxt 3. May be it should be copied into @nuxt/bridge repo as well.

Logs

[nuxt] [request error] vue-query hooks can only be used inside setup() function.
  at useQueryClient (/C:/Projects/nuxt-bridge-fonts/node_modules/vue-query/lib/index.mjs:58:15)
  at useBaseQuery (/C:/Projects/nuxt-bridge-fonts/node_modules/vue-query/lib/index.mjs:533:25)
  at Module.useQuery (/C:/Projects/nuxt-bridge-fonts/node_modules/vue-query/lib/index.mjs:588:20)
  at setup (/C:/Projects/nuxt-bridge-fonts/.nuxt/dist/server/server.mjs:15683:54)
  at invokeWithErrorHandling (/C:/Projects/nuxt-bridge-fonts/.nuxt/dist/server/server.mjs:3326:30)
  at initSetup (/C:/Projects/nuxt-bridge-fonts/.nuxt/dist/server/server.mjs:2749:27)
  at initState (/C:/Projects/nuxt-bridge-fonts/.nuxt/dist/server/server.mjs:5659:5)
  at VueComponent.Vue._init (/C:/Projects/nuxt-bridge-fonts/.nuxt/dist/server/server.mjs:5985:9)
  at new VueComponent (/C:/Projects/nuxt-bridge-fonts/.nuxt/dist/server/server.mjs:6120:18)
  at createComponentInstanceForVnode (C:\Projects\nuxt-bridge-fonts\node_modules\vue-server-renderer\build.dev.js:2534:12)

Environment

DamianOsipiuk commented 2 years ago

Hmm, so by quick look it seems that client-side it's working fine. Problem is with server-side rendering.

When you are navigating from another page, it's rendered on client-side. When you navigate directly or refresh the page it's rendered on server-side. In your example server-side fails. Not sure why though.