I have a next.js personal project I'm working on and the component I'm working on has a getstaticprops function where it will scrape a website and then post the scraped data to a firebase realtime database. The issue I'm running into is that after the page is built, I have some javascript code that runs in the browser that fetches that recently added data but always results in a "null" response from the database meaning that new entry isn't there.
What I did notice is that if I add a delay before fetching data from the database using setTimeout(), it seems to work. So I ran something like this
setTimeout(() => {console.log(fetcher());}, 200)
meanwhile just running fecther() resulting in a null response.
So I'm wondering why this is happening? The javascript that fetches doesn't run until after the data is posted to the database so it should be available right? Is this an issue on the end of firebase with some latency to add the data to the database? Or is there something else I should be doing? Not too happy about having to use the timeout function.
So I'm wondering why this is happening? The javascript that fetches doesn't run until after the data is posted to the database so it should be available right?
Yes, once it is in the database it will be available. You know this happened once you get a 200 return from your post to the database.
Is this an issue on the end of firebase with some latency to add the data to the database? When you communicate with another system, there is always latency. Be it a database, an API, a hard drive etc. Or is there something else I should be doing? Not too happy about having to use the timeout function.
Well yes. While the timeout does work, it is neither recommended, readable nor reliable. You should familiarize yourself with the concept of asynchronous code.
What is asynchronous code? To answer that, let's take a quick look at synchronous code first. Which is what is usually used. An example:
x = 5
console.log(x) // Output: 5
x = addFivetoNumber(x)
console.log(x) // Output: 10
First the 1st line is executed, then the 2nd and so on. When a function is called, the code within the function will be executed and the program continues once the function is done.
Know when you have a function that is asynchronous, the code continues without awaiting the function to finish:
x = 5
console.log(x) // Output: 5
x = asyncAddFivetoNumber(x)
console.log(x) // Output: 5
...
console.log(x) // Once the function is done we get the expected value
// Output: 10
What if we need to wait for that function before we continue? Well in that case we need to wrap our async code. We can use callbacks.
Callbacks essentially divide your code into before async function and after async function. Every line of code inside the callback will only be executed once the async function finished:
x = 5
console.log(x) // Output: 5
asyncAddFivetoNumber(x, (result) => {
x = result
console.log(x) // Output: 10
}
console.log(x) // Output: 5
If we have several async functions that need the result of one another, one might nest the callbacks. It is possible, but not recommended as it gets unreadable pretty quick. For these cases, I would recommend looking up promises and async/await.