refactor(vue-query): use shallowRef to improve performance

[RomainLanz]

Hey there! 👋🏻

This PR refactors the useQueries composable to use a shallowRef instead of a ref to define the state.

If an object is assigned as a ref's value, the object is made deeply reactive. That is the case in the useQueries composable. Meaning if we had a huge data object, all its properties would be reactive, causing performance issues.

A shallowRef, in comparison, does not convert the object. The inner value is stored and exposed as-is.

This PR is in draft because I believe we can do the same optimization in the useQuery composable. I need to play with it and ensure nothing is breaking before making changes.

Related PR on VueUse repository to add a toShallowRef helper that could be used in useQuery.

Linked Discussion: #5400

[vercel]

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

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)			Jun 30, 2023 10:20pm

[codesandbox-ci]

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 fc866bd:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit fc866bd. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx affected --targets=test:eslint,test:lib,test:types,test:build

---

Sent with 💌 from NxCloud.

[TkDodo]

please reopen to the beta branch, thanks.

[GreatAuk]

useQuery return a readonly data, use ref seems is meaningless.

[RomainLanz]

useQuery return a readonly data, use ref seems is meaningless.

It has to be a ref (or shallowRef) to ensure a rerender when data changes.