Devtools throw error when resetting loading after query fails with no data.

[adrianbunea]

Describe the bug

After making a request to a Rest API endpoint that is missing, I receive a 404 status. I try to reset the loading state by pressing Trigger Loading in the Devtools to work on the loading state but I receive this error:

Cannot read properties of null (reading '__previousQueryOptions')

The code throwing the error is in Devtools.tsx and looks like this:

const restoreQueryAfterLoadingOrError = () => {
    const activeQueryVal = activeQuery();
    const previousState = activeQueryVal.state;
    const previousOptions = activeQueryVal.state.fetchMeta.__previousQueryOptions;
    activeQueryVal.cancel({
      silent: true
    });
    activeQueryVal.setState({
      ...previousState,
      fetchStatus: "idle",
      fetchMeta: null
    });
    activeQueryVal.fetch(previousOptions);
  };

activeQueryVal.state.fetchMeta is null, I also notice that the .fetct(previousOptions) function is also missing in the activeQueryVal so it would crash there even if it could somehow get the previousOptions data. The Devtools work fine for other queries, and I notice nothing special in the way that the query is used, just that the other queries don't respond with 404.

I suspect the problem lies in the way I configured my axios client response interceptor.

client.interceptors.response.use(
  (response) => ({ ...response, data: camelizeKeys(response.data) }),
  async (err) => {
    const status = err.response?.status

    if (status === 401) {
      oktaAuth.signOut({
        postLogoutRedirectUri: `${window.location.origin}/`
      })
    } else throw err
  }
)

Your minimal, reproducible example

https://codesandbox.io/p/devbox/ancient-framework-lt77x8

Steps to reproduce

1. Clone any React Query example
2. Make sure you use React Query Devtools
3. When making a request using React Query make sure the endpoint doesn't exist and will return a 404 status code
4. Open the Devtools, find your query, click the Trigger Loading
5. Error should appear.

OR use this https://codesandbox.io/p/devbox/ancient-framework-lt77x8

Expected behavior

I expect the query to go to loading again.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: MacOS, M2
• Browser: Chrome
• Version: 127

Tanstack Query adapter

react-query

TanStack Query version

v5.54.4

TypeScript version

Not using

Additional context

No response

[TkDodo]

yeah it's a bug in the devtools. let's coordinate the efforts in this issue please:

• Bug: Cannot read properties of null (reading '__previousQueryOptions') #7521