SolidJS•10mo ago

Blank array of documents from Firestore - createEffect(), createSignal()

Hi all, I'm starting with web frameworks for the first time and chose SolidJS. I'm stuck... retrieving collection of docs with onSnapshot from firestore in createEffect. When the array of docs is populated I'm saving it in variable (createSignal([]) - default value empty array). When I'm using <For each> everything is working, but whenever I want to access an attribute of the first array element (without <For each>) I'm getting error "Cannot read properties of undefined". When debugging I see that the console log is running 2 times - first time the array is empty and second time it has my data. It seems obvious, that when the array is empty for the first time and I want to access the first element it's undefined, so the attribute cannot be retrieved, that's why this error. Is there any nice/standard way to solve this? I've tried to set up some dummy object for the createSignal default value like createSignal([{round_nr: 0}]) and this is working, because for the firt time when the function is running the array has this dummy object and is not more undefined and I can read the round_nr attribute which is 0 for the first time and immediately is switched with proper value when the function runs for the second time. But is it the solution to my problem? Or perhaps is there a better approach?

4 Replies

tomxorOP•10mo ago

const [rounds, setRounds] = createSignal([{round_nr: 0}])

    createEffect(() => {
        const colRef = collection(db, 'games', params.id, 'rounds')
        const q = query(colRef, orderBy('round_nr', 'desc'))
        
        onSnapshot(q, (snapshot) => {
          let docs = []
          snapshot.docs.forEach((doc) => {
            docs.push({ id: doc.id, ...doc.data() })
          })
          setRounds(docs)
        })
      })

const [rounds, setRounds] = createSignal([{round_nr: 0}])

    createEffect(() => {
        const colRef = collection(db, 'games', params.id, 'rounds')
        const q = query(colRef, orderBy('round_nr', 'desc'))
        
        onSnapshot(q, (snapshot) => {
          let docs = []
          snapshot.docs.forEach((doc) => {
            docs.push({ id: doc.id, ...doc.data() })
          })
          setRounds(docs)
        })
      })

this i already with this dummy object as defalut value for createSignal, that I don't get the undefined error while trying to read round_nr attribute... there must be some beter way to deal with this 🙂 but I'm using all this code in a separate page (jsx file), so this code is a part of the function and I want to use rounds() in return() statement to display something in browser. How to do that. If statement in createEffect() will not work for me for now there is nothing - I want first to output this parameter value round_nr in a simple <div>

bigmistqke•10mo ago

dummy object seems weird way to go about it imo, I would do like tito and just handle the case of an empty array

tomxorOP•10mo ago

Could you please tell me where to do it? How to handle it in return statement in the code below?

export default function GameDetails() {
    const params = useParams()

    const [rounds, setRounds] = createSignal([])

    createEffect(() => {
        const colRef = collection(db, 'games', params.id, 'rounds')
        const q = query(colRef, orderBy('round_nr', 'desc'))
        
        onSnapshot(q, (snapshot) => {
          let docs = []
          snapshot.docs.forEach((doc) => {
            docs.push({ id: doc.id, ...doc.data() })
          })
          setRounds(docs)
        })
    })
    
    return (
        <div>
            {rounds()[0].round_nr}
        </div>
    )
}

export default function GameDetails() {
    const params = useParams()

    const [rounds, setRounds] = createSignal([])

    createEffect(() => {
        const colRef = collection(db, 'games', params.id, 'rounds')
        const q = query(colRef, orderBy('round_nr', 'desc'))
        
        onSnapshot(q, (snapshot) => {
          let docs = []
          snapshot.docs.forEach((doc) => {
            docs.push({ id: doc.id, ...doc.data() })
          })
          setRounds(docs)
        })
    })
    
    return (
        <div>
            {rounds()[0].round_nr}
        </div>
    )
}

bigmistqke•10mo ago

or mb

return (
    <Show when={rounds()[0]} fallback={<div>no rounds!</div>}>
      {(item) => <div>{item().round_nr}</div>}
    </Show>
);

return (
    <Show when={rounds()[0]} fallback={<div>no rounds!</div>}>
      {(item) => <div>{item().round_nr}</div>}
    </Show>
);

Gaming

Programming

Blank array of documents from Firestore - createEffect(), createSignal()