fix(vue-query): ensure built-in types are not being unwrapped

[Mini-ghost]

Resolve the following error

This error was mentioned in PR #5935 (comment)

import { useQuery, UseQueryOptions } from https://github.com/TanStack/query/tree/master/packages/vue-query;
import { Ref, toRef } from https://github.com/vuejs/core;

type MaybeRef<T> = T | Ref<T>;
type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T);

const fetchUser = (userId: Date) =>
  fetch(`/api/user/${userId.toISOString()}`).then(res => res.json());

type User = any;
export function useUser(
  userId: MaybeRefOrGetter<Date>,
  options?: UseQueryOptions<User, any, User, readonly [string, Ref<Date>]>
) {
  return useQuery({
    queryKey: ['user', toRef(userId)],
    queryFn({ queryKey }) {
      return fetchUser(queryKey[1]);
    },
    ...options,
  } satisfies typeof options);
}

example.ts:185:24 - error TS2345: Argument of type '{ toString: {}; toDateString: {}; toTimeString: {}; toLocaleString: {}; toLocaleDateString: {}; toLocaleTimeString: {}; valueOf: {}; getTime: {}; getFullYear: {}; getUTCFullYear: {}; getMonth: {}; ... 32 more ...; [Symbol.toPrimitive]: {}; }' is not assignable to parameter of type 'Date'.
  Types of property 'toString' are incompatible.
    Type '{}' is not assignable to type '() => string'.
      Type '{}' provides no match for the signature '(): string'.

In that PR, not avoiding unwrapping built-in types resulted in errors, such as Ref, occurring.

Before

After

[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)	Visit Preview		Sep 4, 2023 1:14pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 46051ed. 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 2 targets

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

---

Sent with 💌 from NxCloud.

[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 30766a5:

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

[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 46051ed:

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

[codecov-commenter]

Codecov Report

Patch has no changes to coverable lines.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the GitHub App Integration for your organization. Read more.

Files Changed	Coverage
packages/vue-query/src/useBaseQuery.ts	ø
packages/vue-query/src/useInfiniteQuery.ts	ø
packages/vue-query/src/useQuery.ts	ø

📢 Thoughts on this report? Let us know!.

[callumacrae]

what about user-defined classes?

thanks for picking this up so quickly!

[Mini-ghost]

When dealing with user-defined classes, we can draw inspiration from Vue's handling method, as demonstrated here:

https://github.com/vuejs/core/blob/0e8bbe873e579f3d3a74c44af28f7df9e7a06978/packages/reactivity/src/ref.ts#L459-L472

A possible implementation might resemble the following:

declare module '@tanstack/vue-query' {
   export interface RefUnwrapBailTypes {
     UserDefinedClass: UserDefinedClass;
   }
}

However, it's important to note that @tanstack/query-core will convert the queryKey into a string using JSON.stringify to use it as a key for cache access. This approach might encounter issues with types like Map, Set, or user-defined classes that cannot be stringified.

Given this consideration, I'm not sure if queryKey should support such a wide range of types.

It would be great to get feedback from @DamianOsipiuk .