I’m using Nuxt JS for my front-end which I’m hosting here.
My backend is Strapi which is hosted on Heroku.
The issue is when making changes on Strapi API they do NOT show up on Netlify hosting. Clearing browser cache or viewing in incognito mode changes are not represented on my Netlify URL.
I’ve changed my endpoints locally to Heroku URL and changes show up in my local environment.
Build command: npm run generate to create a dist folder for Netlify
Any insight would be greatly appreciated!
Hi @hrishikesh
Thanks for replying back!
What would you need to test? My Source Code on GitHub? or…
Netlify URL is https://naughty-shaw-d4daba.netlify.app
For now, the Netlify URL should do. However, I was more specifically asking for a test case, as to how do we reproduce this? Is there a specific page on your website where this happens or do we have to do something to trigger this?
Also, how does the old content look and how should the new content look? We can then see if it matches your description.
I’m deleting your reply for now as the credentials can be still seen in edit history. I’ll test it meanwhile.
After checking your website, I’ve a question. To provide some context, I changed the 12th Jan date to 25th Jan and yes, the changes were not live on website. But the question is, how are you fetching this data?
I can see only 1 fetch request to the URL https://mallow-hill-walkers-club.herokuapp.com/meeting and that returns some JSON, but how exactly the rest of the data is populated?
I’m doing nothing fancy (I’m not a dev) just using the Fetch API
I have two VUE components
First one is a template for all months (dateEntry.vue) like so
<template>
<div>
<div class="row entry-container">
<div class="col-md-2">
<div class="date-container"><h4>{{ entry.Date }}</h4></div>
</div>
<div class="col-md-10 entry-data">
<div class="row">
<div class="col-md-12 bot-margin"><h4>Location:</h4><span>{{ entry.location }}</span></div>
</div>
<div class="row">
<div class="col-md-12"><h5>Meet:</h5><span>{{ entry.meet }}</span></div>
</div>
<div class="row">
<div class="col-md-5"><h5>Leader:</h5><span>{{ entry.leader }}</span></div>
<div class="col-md-7"><h5>Leader Contact:</h5><span>{{ entry.leaderContact }}</span></div>
</div>
<div class="row entry-third-para">
<div class="col-md-5"><h5>Duration:</h5><span>{{ entry.duration }}</span></div>
<div class="col-md-7"><h5>Difficulty:</h5><span>{{ entry.difficulty }}</span></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props:{
entry:{
type: Object,
default: () => {}
}
}
}
</script>
And VUE components for each month like so example jan.vue
<template>
<div>
<div>
<p class="fetching" v-if="$fetchState.pending">Fetching Entries...</p>
<p class="error" v-else-if="$fetchState.error">An error occurred... <br>Unable to get entries for this month <br>Or<br>Maybe entries have not been added yet. Call back later!</p>
<DateEntry v-else v-for="jans in jans" :entry="jans" :key="jans.id"/>
</div>
</div>
</template>
<script>
export default {
async fetch() {
this.jans = await fetch(
'https://mallow-hill-walkers-club.herokuapp.com/jans'
).then(res => res.json())
},
data() {
return {
jans: [],
}
}
}
</script>
I don’t think you can use Fetch API like that, at least not in vanilla JS. Yes, you say it worked locally, but I can’t get it to work. This is what I did:
As you can see, jans returns undefined.
However, this works:
So your code could either be:
// This is a more complete example with error handling
let jans = this.jans
fetch('https://mallow-hill-walkers-club.herokuapp.com/jans').then(response => {
if (response.ok) {
return response.json()
} else {
throw response.statusText
}
}).then(data => {
jans = data
}).catch(error => {
console.log(error)
})
OR if you want async/await:
// I've excluded error handling in this example
let jans = this.jans
(async () => {
const response = await fetch('https://mallow-hill-walkers-club.herokuapp.com/jans')
jans = await response.json()
})()
Sorry, but for you, I’m not a dev so therefore you gonna (please) spell it out for me. I’ve tried implementing your above code and get errors like so (see image)
The closest I can get to implementing your code is this
<script>
let jans = this.jans
export default {
data() {
return {
jans: []
}
},
async fetch() {
('https://mallow-hill-walkers-club.herokuapp.com/jans').then(response => {
if (response.ok) {
return response.json()
} else {
throw response.statusText
}
}).then(data => {
jans = data
}).catch(error => {
console.log(error)
})
}
}
</script>
The closest I get to implementing your code is this:
<script>
let jans = this.jans
export default {
data() {
return {
jans: []
}
},
async fetch() {
('https://mallow-hill-walkers-club.herokuapp.com/jans').then(response => {
if (response.ok) {
return response.json()
} else {
throw response.statusText
}
}).then(data => {
jans = data
}).catch(error => {
console.log(error)
})
}
}
</script>
But I get this in Browser
I’m following Nuxt documentation like so
<script>
export default {
data() {
return {
mountains: []
}
},
async fetch() {
this.mountains = await fetch(
'https://api.nuxtjs.dev/mountains'
).then(res => res.json())
}
}
</script>
Which is pretty much what I have and therefore why would Netlify have an issue
I think the documentation above talks about Server Side Rendering which might not be the case here.
I’m not a VueJS or NuxtJS developer by any means but I think you could try making your code like this:
export default {
data() {
return {
jans: []
}
},
beforeMount() {
this.getData()
},
methods: {
async getData() {
const response = await fetch('https://mallow-hill-walkers-club.herokuapp.com/jans')
const data = await response.json()
this.jans = data
}
}
}
Taken from here: Requests in VueJS: Fetch API and Axios — A Comparison | by John Au-Yeung | Bits and Pieces.