Search code examples
vue.jsvuejs3webpack-hmrhot-reload

Is there a way to prevent vue hot reload from making too many API calls?


I'm new to vue and I just started working on my first project.

In my main component, I have a fetch request to an (limited) API endpoint on page load. Every time I make changes to my code, the page refreshes and makes a new API call.

What are some common ways to avoid overusing network requests when using hot reload?


Solution

  • There are ways to deal with reducing the api requests, but it depends on the context. Assuming this is only for development though, and you don't want to have any API caching in production, the best way is likely to proxy (or mock if possible) you API.

    I usually just setup a custom mock server, so can't guarantee success, but looks like node-api-cache-proxy might be helpful to get an express server to cache your api calls. Then you can setup a proxy in your vue config file to point to the proxy instead of to the API directly