Open TkDodo opened 2 weeks ago
@Newbie012 is there a way to make this work ?
Yes (Stackblitz). I had a similar issue where I had to cache signed S3 (AWS) URLs. I ended up doing something (roughly) like:
import { useQuery } from '@tanstack/react-query';
class QueryableValue<T> {
constructor(private value: T, private map: (v: T) => string) {}
toJSON = () => this.map(this.value);
toString = () => this.value;
valueOf = () => this.value;
}
const path = new QueryableValue(
'https://signed-url.com?Expiration=123',
(x) => x.split('?Expiration')[0]
);
export const Test = () => {
const query = useQuery({
queryKey: [path],
queryFn: () => path.toString(),
});
return <div>{query.data}</div>;
};
so toJSON will be called by query?
Correct, since query uses JSON.stringify
which uses .toJSON
.
Describe the bug
The following yields a false-positive eslint violation:
error with:
Your minimal, reproducible example
failing test case attached
Steps to reproduce
Here's a failing test case:
Expected behavior
Ideally, I would like to see no error here, because
path
winds up in thequeryKey
. Not sure if it's possible thoughHow often does this bug happen?
None
Screenshots or Videos
No response
Platform
all
Tanstack Query adapter
None
TanStack Query version
5.29.2
TypeScript version
5.3.3
Additional context
No response