Next.js API Route に axios-hooks で connect ECONNREFUSED ::1:80

経緯

ページロード時のデータフェッチを axios-hooks で API Route のエンドポイントにしていると、サイトルートパスからアクセスしたときは問題ないが、下層パスの当該ページに直アクセスするとエラーになっていた。

どうやらリクエストを出しているホストが正しくない。

原因

不明。解決したのと、ユースケース的に解決策の実装方法のほうが適切なので、一旦調査はしていません。

解決策

とりあえずページロード時のデータフェッチだけで良いので、getInitialProps にてデータフェッチをして、props でデータを渡す形にすると解決。

arg2:
AxiosError {port: 80, address: '::1', syscall: 'connect', code: 'ECONNREFUSED', errno: -61, …}
address:
'::1'
code:
'ECONNREFUSED'
config:
{transitional: {…}, adapter: ƒ, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
errno:
-61
message:
'connect ECONNREFUSED ::1:80'
name:
'Error'
port:
80
request:
RedirectableRequest {_writableState: WritableState, _events: {…}, _eventsCount: 3, _maxListeners: undefined, _options: {…}, …}
stack:
'Error: connect ECONNREFUSED ::1:80\n    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)\n    at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17)'
syscall:
'connect'
[[Prototype]]:
Error