Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: replace useQueryProvider with VueQueryPlugin #116

Merged
merged 13 commits into from
Jan 22, 2022

Conversation

DamianOsipiuk
Copy link
Owner

@DamianOsipiuk DamianOsipiuk commented Jan 21, 2022

TODO:

  • Vue2 support
  • cleanup on unmount
  • multiple clients support
  • docs change to use plugin instead of provider

Closes: #98
Closes: #112

@vercel
Copy link

vercel bot commented Jan 21, 2022

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/damianosipiuk/vue-query/HZL6L8wdrYth6JjnZ4fpqzQWxdHB
✅ Preview: https://vue-query-git-vue-query-plugin-damianosipiuk.vercel.app

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 21, 2022

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 635a7aa:

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

@codecov
Copy link

codecov bot commented Jan 21, 2022

Codecov Report

Merging #116 (635a7aa) into main (4d43dcd) will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff            @@
##              main      #116   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           13        14    +1     
  Lines          239       266   +27     
  Branches        45        51    +6     
=========================================
+ Hits           239       266   +27     
Impacted Files Coverage Δ
src/nuxt/useNuxtQueryProvider.ts 100.00% <ø> (ø)
src/vue/useQueryClient.ts 100.00% <100.00%> (ø)
src/vue/useQueryProvider.ts 100.00% <100.00%> (ø)
src/vue/utils.ts 100.00% <100.00%> (ø)
src/vue/vueQueryPlugin.ts 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4d43dcd...635a7aa. Read the comment docs.

client = new QueryClient(clientConfig);
}

client.mount();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was wondering if we can track when the app is being destroyed to do unmounting.

@DamianOsipiuk Do you have any ideas?

As I understand mount among other things adds event listener to do refetching on window focus. It's better to remove the listener once the app is destroyed. It can be especially important in cases when a page has multiple Vue applications (at my job we have an AngularJS app with multiple Vue apps within it)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Relevant issue: vuejs/core#4516

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the link! 👍
I there is a linked PR, hopefully it will land there soon 🤞

Comment on lines 42 to 45
app.unmount = function vueQueryUnmount() {
client.unmount();
originalUnmount();
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice trick!

@sonarcloud
Copy link

sonarcloud bot commented Jan 22, 2022

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@DamianOsipiuk
Copy link
Owner Author

Before we can deprecate useQueryProvider i need to review and modify nuxt provider and examples.

@DamianOsipiuk DamianOsipiuk marked this pull request as ready for review January 22, 2022 21:35
@DamianOsipiuk DamianOsipiuk changed the title draft: create VueQueryPlugin feat: replace useQueryProvider with VueQueryPlugin Jan 22, 2022
@DamianOsipiuk DamianOsipiuk merged commit e8a4dac into main Jan 22, 2022
@DamianOsipiuk DamianOsipiuk deleted the vue-query-plugin branch January 22, 2022 22:23
DamianOsipiuk added a commit that referenced this pull request Jan 22, 2022
* feat: create VueQueryPlugin

* docs: update Installation section

* feat(plugin): vue2 plugin

* feat(plugin): unmount hook

* build: remove plugin, add external deps

* test: vueQueryPlugin

* docs: update some docs

* fix: import type from core, export plugin options type

* chore: update examples

* feat: multiple clients support

* fix: multi client support

* refactor: query client key helper

* docs: update custom clients page

Co-authored-by: Alexey Antipov <antipov.alexei@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants