Strange behaviour with react query

[eason123deng]

I am currently working on a project with a lot of class components. Recently my team has decided to start using react query in some of the class components and I encountered a very strange bug in which useQuery is making an API call with an incorrect payload/query param (the request URL has an extra slash / in the middle and one of the query param is missing) for a particular usage of react query.

To integrate useQuery with class components, I adopted an HOC approach as follow:

// useFetchImage.tsx

// Custom hook that uses useQuery and returns query result
withFetchImage = () => {
     const [isFetching, setIsFetching] = useState(false);

     const { data: result } = useQuery(
        SOME_QUERY_KEY,
        SOME_API_CALL,
        {
            enabled: isFetching,
            ....
        }
     );

     return ({
           fetchImageAPI: setIsFetching,
           responese: result
     })
}

// a HOC that will integrate react query with class component
export const useFetchImage = (Component) => (props) => {
     const {
       fetchImageAPI,
       response
     } = withFetchImage();

     return <Component { ...props, fetchImageAPI, response } />
}

// ComponentA.tsx
.....
import useFetchImage from SOME_PATH;
.....

const fetchImages = () => { // fetch some image on button click
   this.props.fetchImageAPI(true)
}

....

export default useFetchImage(ComponentA)

// ParentComponent.tsx

.....

// ComponentA is rendered when ParentComponent mounts, then when some button is clicked UI will render ComponentX.
constructor(props) {
  super(props);
  this.state = {
        isCompoenentXRendered : false
    };
}

.....

private handleForwardButtonClicked() {
   this.setState({
       isCompoenentXRendered: true
    })
}

private handleBackButtonClicked() {
    this.setState({
       isCompoenentXRendered: false
    })
}

.....

render() {
   return (
     this.state.isCompoenentXRendered
      ? <ComponentX handleBackButtonClicked />
      : <ComponentA handleForwardButtonClicked />
   )
}

export default ParentComponent

The above setup works nicely until I wrapped ParentComponent with useFetchImage, the modified ParentComponent.tsx becomes something like:

// ParentComponent.tsx

.....

// ComponentA is rendered by default when ParentComponent mounts, then when some button is clicked UI will render ComponentX.
constructor(props) {
  super(props);
  this.state = {
        isCompoenentXRendered : false
    };
}

.....

private handleForwardButtonClicked() {
   this.setState({
       isCompoenentXRendered: true
    })
}

private handleBackButtonClicked() {
    this.setState({
       isCompoenentXRendered: false
    })
}

.....

render() {
   return (
     this.state.isCompoenentXRendered
      ? <ComponentX handleBackButtonClicked />
      : <ComponentA handleForwardButtonClicked />
   )
}

export default useFetchImage(ParentComponent)

With the above modification, withFetchImage works as expected as long as ComponentA never unmounts (ComponentA is the only component that will use useQuery). As soon as ComponentA remounts, react query starts calling the same API with corrupted URL and payload. I was able to fix the issue by removing useFetchImage from either ParentComponent or ComponentA, but I have absolutely no clue why it occurs. Does anyone know why this weird issue occurs?

[TkDodo]

very hard to say with this abstract code. a codesandbox reproduction would be best.

please make sure to include all dependencies of the query (everything that is used inside the queryFn) in the queryKey!