Resolved: SvelteKit load function error: must return a plain object at the top level

In this post, we will see how to resolve SvelteKit load function error: must return a plain object at the top level

Question:

I cannot get SvelteKit load function works when using it with Firebase, I always get this error message:

a load function related to route ‘/’ returned a function, but must return a plain object at the top level (i.e. return {…})

I’m using onSnapshot here with Firestone to get the updated data whenever it changed on the database.

export function load() {  
    const queryParams = [orderBy('date')];
    const q = query(collection(db, 'daily_status'), ...queryParams);
    
    messagesUnsubscribeCallback = onSnapshot(
        q,
        querySnapshot => {
            let data = querySnapshot.docs.map( doc => (
                JSON.parse(JSON.stringify(
                    {
                        id: doc.id, 
                        status: doc.data().status, 
                        date: doc.data().date.toDate().toLocaleDateString('en-au'),
                        note: doc.data().note
                    } 
                ))
            ))
        return { daily_status: data }
    })
    return messagesUnsubscribeCallback;
}

Best Answer:

It looks like your issue is the fact that you are returning the function onSnapshot() inside the load function. The only thing you can return inside a load method is a plain object as the error states. What you might want to do is to run the snapshot code inside an onMount.
Another solution would be creating a svelte store and pass the onSnapshot into the store. An example can be seen in this tutorial: https://www.captaincodeman.com/lazy-loading-and-querying-firestore-with-sveltekit#introduction
Reference: https://kit.svelte.dev/docs/load

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com

Question:

Best Answer:

Related