diff --git a/.changeset/stable-devtools-query-rows.md b/.changeset/stable-devtools-query-rows.md new file mode 100644 index 00000000000..d58a0a9dbc0 --- /dev/null +++ b/.changeset/stable-devtools-query-rows.md @@ -0,0 +1,5 @@ +--- +"@tanstack/query-devtools": patch +--- + +Resolve devtools query rows from their stable query hash so mutated object query keys do not break row rendering. diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx index 8e9b1f4a321..2d5fe0993b3 100644 --- a/packages/query-devtools/src/Devtools.tsx +++ b/packages/query-devtools/src/Devtools.tsx @@ -1384,54 +1384,35 @@ const QueryRow: Component<{ query: Query }> = (props) => { const t = (light: string, dark: string) => (theme() === 'dark' ? dark : light) const queryState = createSubscribeToQueryCacheBatcher( - (queryCache) => - queryCache().find({ - queryKey: props.query.queryKey, - })?.state, + (queryCache) => queryCache().get(props.query.queryHash)?.state, true, (e) => e.query.queryHash === props.query.queryHash, ) const isDisabled = createSubscribeToQueryCacheBatcher( (queryCache) => - queryCache() - .find({ - queryKey: props.query.queryKey, - }) - ?.isDisabled() ?? false, + queryCache().get(props.query.queryHash)?.isDisabled() ?? false, true, (e) => e.query.queryHash === props.query.queryHash, ) const isStatic = createSubscribeToQueryCacheBatcher( (queryCache) => - queryCache() - .find({ - queryKey: props.query.queryKey, - }) - ?.isStatic() ?? false, + queryCache().get(props.query.queryHash)?.isStatic() ?? false, true, (e) => e.query.queryHash === props.query.queryHash, ) const isStale = createSubscribeToQueryCacheBatcher( (queryCache) => - queryCache() - .find({ - queryKey: props.query.queryKey, - }) - ?.isStale() ?? false, + queryCache().get(props.query.queryHash)?.isStale() ?? false, true, (e) => e.query.queryHash === props.query.queryHash, ) const observers = createSubscribeToQueryCacheBatcher( (queryCache) => - queryCache() - .find({ - queryKey: props.query.queryKey, - }) - ?.getObserversCount() ?? 0, + queryCache().get(props.query.queryHash)?.getObserversCount() ?? 0, true, (e) => e.query.queryHash === props.query.queryHash, ) diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx index 7c1c0a62a83..5cef7326f40 100644 --- a/packages/query-devtools/src/__tests__/Devtools.test.tsx +++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx @@ -374,6 +374,18 @@ describe('Devtools', () => { expect(rendered.getByText('static')).toBeInTheDocument() expect(rendered.getByLabelText(/, static/)).toBeInTheDocument() }) + + it('should render a query row when an object query key is mutated in place', () => { + const filters = { page: 1 } + queryClient.setQueryData(['mutable-key', filters], 'x') + filters.page = 2 + + const rendered = renderDevtools({ initialIsOpen: true }) + + expect( + rendered.getByLabelText(/Query key \["mutable-key",\{"page":1\}\]/), + ).toBeInTheDocument() + }) }) describe('status counts', () => {