why does every request get sent twice
Every api call i make using wasps axios wrapper is double calling the endpoint:
[ Server ] GET /api/messaging/users 304 2.818 ms - -
[ Server ] GET /api/messaging/users 304 2.818 ms - -
[ Server ] GET /api/messaging/conversations 304 2.660 ms - -
[ Server ] GET /api/messaging/conversations 304 2.660 ms - -
[ Server ] POST /api/user/claim-invitation 200 5.956 ms - 16
[ Server ] POST /api/user/claim-invitation 200 5.956 ms - 16
notice how each gets called twice? what might be causing this?
2 Replies
Hi @Captain Incredible. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The behavior you're seeing—where every API call is sent twice—is most likely due to React 18's StrictMode in development. When StrictMode is enabled, React intentionally double-invokes certain lifecycle methods and effects to help identify side effects and ensure your code is resilient. This can result in components (and their useEffect hooks) running twice, which in turn causes your API calls to be made twice during development. This does not happen in production builds.
A similar issue was reported with social login callbacks, where enabling React 18's StrictMode caused the callback component to render twice, sending the token twice to the backend. The recommended solution is to redesign how the request is sent in the component, for example by using an AbortController to cancel duplicate requests or by modifying the query after the first request is sent. You can find more details and suggestions in this discussion: Social login callback page sends the token twice.
So, the double API calls are a development-only issue caused by React StrictMode, not by Wasp or its Axios wrapper itself. If you want to avoid this during development, you can temporarily disable StrictMode, but it's generally recommended to keep it enabled and ensure your code is idempotent or protected against duplicate requests.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Captain Incredible, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
React 18+ has this behaviour in development in strict mode (this is normal and it won't happen in production): https://react.dev/reference/react/StrictMode
<StrictMode> – React
The library for web and native user interfaces
