simoneb / axios-hooks

🦆 React hooks for axios

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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