query-devtools leaking Solid types results in type error in adapter specific dev tools

[arnoud-dv]

Description

First found this issue when I developed the Angular Query devtools and got an error attempting to install them in an Angular application because solid-js was not found. Installing solid-js in the Angular application solved the issue.

After investigating I found it shouldn't be needed to install solid-js to use the dev tools as Solid is already embedded into them. The issue is actually Solid types leaking from the query-devtools package.

This occurs probably in all adapter-specific dev tools but was able to reproduce this in at least React Query devtools and the Angular Query devtools (in development). As React applications are often developed with skipLibCheck: false in tsconfig.json the error is typically hidden but it is still a type error.

Solution

Simply making fields in the TanstackQueryDevtools class private makes sure no types are leaked.

Easy workaround is to set skipLibCheck to true. Why do I still think this needs to be fixed by making fields private?

• Out of the box Angular applications do not have this Typescript option set to true and I would prefer not to require users of Angular Query to enable this option.
• It is a genuine type error
• Implementation details leaking from the query-devtools package would make it harder to make changes
• Implementers of dev tools might use the public fields where the set functions should be used

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/tanstack-query-example-react-basic-typescript-skiplibcheck-false-8nmrjj

Steps to reproduce

This code sandbox has skipLibCheck set to false to reproduce it. It works fine and no error is shown. That is because Vite does not perform type checking during development, only transpilation. Type checking is expected to be done by the IDE. However when running the build script from package.json this error appears:

Expected behavior

Query-devtools should not leak Solid specific types. It already has framework agnostic set functions.

How often does this bug happen?

Every time

Screenshots or Videos

index.d.ts in query-devtools contains reference to Solid

Solution: private fields in TanstackQueryDevtools class

After making fields in the class private the references to Solid are gone in index.d.ts

Platform

• v5 RC13 of the dev tools

Tanstack Query adapter

react-query

TanStack Query version

v5 RC12

TypeScript version

No response

Additional context

No response