Migration path to official @tanstack/vue-query

[hi-reeve]

would be a good way to have a way to migrate on the official vue query since now it is supported officially

https://twitter.com/tkdodo/status/1576668077609357312?s=46&t=Kn57aM8aAZTQwKJCFC-HPw

[DamianOsipiuk]

It's in the readme:

---

⚠️ Package migration ⚠️

This package was migrated to be a part of https://github.com/TanStack/query.

If you are still on v1 make sure to follow migration guide first and then switch to @tanstack/vue-query.

If you are already on v2, just swap vue-query for @tanstack/vue-query in both of your package.json and import statements. Everything should still work as before.

---

If that is not enough, please highlight what gives you most trouble. Will try to add more details.

[hi-reeve]

It's in the readme:

---

⚠️ Package migration ⚠️

This package was migrated to be a part of https://github.com/TanStack/query.

If you are still on v1 make sure to follow migration guide first and then switch to @tanstack/vue-query.

If you are already on v2, just swap vue-query for @tanstack/vue-query in both of your package.json and import statements. Everything should still work as before.

---

If that is not enough, please highlight what gives you most trouble. Will try to add more details.

oh sorry didn't check the readme. anyway thankyou.

[DamianOsipiuk]

I will reopen this for now to give migration path more visibility.

[hi-reeve]

I will reopen this for now to give migration path more visibility.

sure, thankyou!

[hi-reeve]

try to upgrade to v2 this morning, got no issue.
but when i try to upgrade to tanstack vue query i got an error while trying to build the project.
on useMutation
when i use mutationAsync and the mutation have a response the response is not inferred to correct type.

like on this image, when i hover manually to res it has correct type, but as you see on the vscode side it inferred to any.

the error on build

[DamianOsipiuk]

That is interesting, since no code was changed during migration.
Could you tell me what typescript and node version are you using?

[hi-reeve]

That is interesting, since no code was changed during migration. Could you tell me what typescript and node version are you using?

typescript 4.8.3 and node 16.13.2

[DamianOsipiuk]

Could you try to do a clean install after switching to @tanstack/vue-query?

• remove node_modules
• remove lock file
• install packages
• restart your IDE

[hi-reeve]

Could you try to do a clean install after switching to @tanstack/vue-query?

• remove node_modules
• remove lock file
• install packages
• restart your IDE

tried and still got an error on build.

probably because the core module? seems like it has a specific ts config and it got read on build.
also because of this, the vue component is read as jsx component.

[DamianOsipiuk]

@zynth17 I'm not able to reproduce it. Could you provide minimal reproduction repo for this?
Built lib does not contain tsconfig, so not sure why you are getting this error.

[hi-reeve]

@zynth17 I'm not able to reproduce it. Could you provide minimal reproduction repo for this? Built lib does not contain tsconfig, so not sure why you are getting this error.

this is hard, i will try to create a repro.

[hi-reeve]

@zynth17 I'm not able to reproduce it. Could you provide minimal reproduction repo for this? Built lib does not contain tsconfig, so not sure why you are getting this error.

trying to move again this morning with really" clean install, it works. 😅

steps to move to @tanstack/vue-query

1. delete your node_modules
2. delete your lock file
3. remove vue-query from your package-json
4. install deps
5. install @tanstack/vue-query
6. change all vue-query import to @tanstack/vue-query

it works.
think you probably need to put this on the docs @DamianOsipiuk

edit : the steps work, but if you use ci/cd like jenkins, might not work because you need to really clean install the node_modules and lock file

edit 2 : i opened a pr to update the readme on #257 @DamianOsipiuk

[douira]

Sadly the tanstack documentation is quite lacking when it comes to Vue-specific features. For example, it doesn't explain how to use Vue suspense, only React suspense.

[DamianOsipiuk]

@douira https://github.com/DamianOsipiuk/vue-query/tree/main/examples/suspense

@tanstack/vue-query documentation will be updated with documentation from this repository

[douira]

@douira https://github.com/DamianOsipiuk/vue-query/tree/main/examples/suspense

@tanstack/vue-query documentation will be updated with documentation from this repository

Hi, thanks for the pointer to that example. I've tried out that example and found that it doesn't set suspense: true in the query options. Also, when suspense: true and enabled: false then the query never resolves the suspense promise which makes sense but isn't documented anywhere. Are there API docs/a reference? I can't find an actual explanation of all the options.

[DamianOsipiuk]

You can find API reference here: https://tanstack.com/query/v4/docs/reference/useQuery

[douira]

Wonderful, thanks.

[AaronConlon]

It's in the readme:

⚠️ Package migration ⚠️

This package was migrated to be a part of https://github.com/TanStack/query.

If you are still on v1 make sure to follow migration guide first and then switch to @tanstack/vue-query.

If you are already on v2, just swap vue-query for @tanstack/vue-query in both of your package.json and import statements. Everything should still work as before.

If that is not enough, please highlight what gives you most trouble. Will try to add more details.

@DamianOsipiuk Hi bro, the doc migration guide can not visit.

[DamianOsipiuk]

@Developer27149 This page is accessible for me.
Not sure if i can do anything about your problem.

Maybe your machine have some website blocking policies? Try from another machine or trough a VPN