docs: fix nuxt 3 usage

[sondh0127]

Nuxt 3 uses useState API to sync state between server and client

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
vue-query	✅ Ready (Inspect)	Visit Preview	Aug 8, 2022 at 4:13AM (UTC)

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ca70bcf974ff74a258fcd4fdc0cd581be9cb2bc2:

Sandbox	Source
DamianOsipiuk/vue-query: basic	Configuration
DamianOsipiuk/vue-query: 2.x-basic	Configuration
DamianOsipiuk/vue-query: nuxt-simple	Configuration

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[DamianOsipiuk]

@sondh0127 Unfortunately this does not work as expected. It sends the rendered page from the server, but queryClient is not preserved in the payload. Tried your solution as well as fiddling with context.ssrContext.payload.

When i hook earlier, like app:created then queryClient state is properly applied to the payload, but at that point it does not contain and query data, so it goes to the client empty, which is not helpfull.

It was working before so nuxt actually broke something.

I would suggest filing a ticket in the nuxt repo or waiting for rc.7 to check if it improves the situation.

[sondh0127]

@DamianOsipiuk Thank you for explaining. But I saw data of vueQueryClient print out at 'app:created'. Is that not right? Here is the reproduction https://stackblitz.com/edit/nuxt-starter-gav86p?file=app.vue

[DamianOsipiuk]

When you look at the source of the page, at the bottom there is a Javascript object attached, which should contain the cache content at a given key. The problem is not that the variable is empty, but that the variable is actually not transfered to the client.

This means that on the client your query will refetch, which is unwanted in some cases.

[sondh0127]

Pic 1: I also saw the data with vue-query key in source file Pic 2: There is no refresh request at client for the todos in the example

[DamianOsipiuk]

Which version of nuxt are you using?

[sondh0127]

I'm use this one on the reproduction.

  "devDependencies": {
    "nuxt": "3.0.0-rc.6"
  },
  "dependencies": {
    "vue-query": "^2.0.0-beta.5"
  }

[DamianOsipiuk]

Hmm, interesting. I would have to double check, cause it did not work for me for some reason.

[codecov[bot]]

Codecov Report

Merging #226 (ca70bcf) into main (ad4cb0f) will not change coverage. The diff coverage is n/a.

@@            Coverage Diff            @@
##              main      #226   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           17        17           
  Lines          415       415           
  Branches        75        75           
=========================================
  Hits           415       415           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[genu]

I'm not sure if its related, but in my nuxt setup, I'm unable to import hydrate and dehydrate:

Unless I import them this way:

import { QueryClient, VueQueryPluginOptions, VueQueryPlugin } from 'vue-query'
import { hydrate, dehydrate } from '@tanstack/query-core'

[github-actions[bot]]

:tada: This PR is included in version 1.26.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: