More generic SSR support

Hi, thanks for this library! I’m maintaining a couple of packages for SSR with Vite and I’m interested in supporting vue-query. I see the SSR support is experimental so I would like to add some feat requests to make it easier to integrate with other tools.

It would be great if we could create and provide a Query Client outside of a component, just like any other Vue library that is installed when creating the app:

const queryClient = new QueryClient({ ... })

app.use(queryClient) // This would use queryClient.install method to run `app.provide(..., queryClient)`

Everything else could probably work in the same way, but this gives us the ability to export this created client to pass it to any SSR tool we need (for callinghydrate or dehydrate), which are normally outside of component scopes. Thanks!

[DamianOsipiuk]

Should be fixed in https://github.com/DamianOsipiuk/vue-query/releases/tag/v1.10.0

[wobsoriano]

@DamianOsipiuk So, as far as I understand, an example using vite-ssr or vitedge would look like this:

// main.js
import App from './App.vue'
import viteSSR from 'vite-ssr/vue'
import { QueryClient } from 'vue-query'
import { hydrate, dehydrate } from 'vue-query/ssr'

export default viteSSR(
  App,
  {
    routes: [],
    transformState(state, defaultTransformer) {
      if (import.meta.env.SSR) {
        state.vueQuery = dehydrate(state.vueQuery)
      }

      return defaultTransformer(state)
    },
  },
  ({ app, initialState }) => {
    const client = new QueryClient()
    if (!import.meta.env.SSR) hydrate(client, initialState.vueQuery)
    initialState.vueQuery = client
  }
)

<script>
// App.vue
import { useContext } from 'vite-ssr'
import { useQueryProvider } from 'vue-query'

export default {
  setup() {
    const { initialState } = useContext()
    useQueryProvider(initialState.vueQuery)
  },
}
</script>

However, this crashes with error Could not resolve "@nuxtjs/composition-api" since the vue-query/ssr module is importing Nuxt-related stuff. I’ve tried importing from vue-query/ssr/hydration but that’s not exposed, unfortunately. Can the Nuxt stuff be separated from the agnostic hydration?

Thanks!

Same problem here https://github.com/DamianOsipiuk/vue-query/discussions/66