Using JavaScript Axios/Fetch. Can you disable browser cache?
Okay so I found a solution. I had to set a timestamp on the API url to get it to make a new call. There doesn't seem to be a way to force axios or fetch to disable cache.
This is how my code now looks
axios.get(`https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1×tamp=${new Date().getTime()}`) .then(response => { const { title, content, link } = response.data[0]; console.log(title, content, link) this.setState(() => ({ title, content, link })); }) .catch(err => { console.log(`${err} whilst contacting the quote API.`) })
I added these headers to all axios requests and it's working well.
axiosInstance.defaults.headers = { 'Cache-Control': 'no-cache', 'Pragma': 'no-cache', 'Expires': '0',};
I think you just need to make the url different each time you make the axios call. Timestamp is just one way to do so. Also consider disabling or filtering service workers caching method if you are developing a PWA.