useAxios hook sending in 2 requests, the first is cancelled immediately
open-certificates opened this issue · comments
I'm using the following in my React component:
const [ {data, loading, error} ] = useAxios(
{
url: "/api/mydata",
method: "GET"
},
{
ssr: false,
useCache: false
}
);
In Chrome's network tab I'm seeing 2 identical XHR requests for /api/mydata fired one after another.
The first does not contain the method and is cancelled after a millisecond or two. The second request successfully retrieves the data.
I'm using
React: 18.2.0
Axios: 1.5.1
Axios Hooks: 5.0.1
NextJS: 13.5.2
I'm also exploring GraphQL for my service layer. When I use the Apollo GraphQL client's "useQuery()" hook I see a single request.
I assume you are using react strict mode and this only occurs during development? If so then this behaviour is correct as react strict mode will trigger useEffect hooks twice https://react.dev/blog/2022/03/29/react-v18#new-strict-mode-behaviors
So cancelling the original request is the correct behaviour.
I will check and confirm. I am using the new app router in NextJS 13, so it is on by default. Here is the documentation:
https://nextjs.org/docs/pages/api-reference/next-config-js/reactStrictMode