1

I got stuck with this problem and don't know how to fix it. I set up the server side props and it's working on the terminal on vscode but when i inspect in chrome or try to do something with it well, nothing appears.

export const getServerSideProps = async (context) => {
    try {
    let properties = []
    const propertiesRef = collection(firestore, 'properties')
    const q = query(propertiesRef, orderBy("propertiename", "desc"))
    
        
        onSnapshot(q, (snapshot) => {
        properties.push(snapshot.docs.map((doc) => (
            { ...doc.data(), id: doc.id }
        )))
        console.log(properties)
    });
        
    return {
        props: {
            propertiesProps : properties,
        }
        }
    } catch(error) {
        console.log(error)
    }
}

When i pass the data here in the page i dont get anything back

    function index({propertiesProps}) {
    const [properties, setProperties] = useState([])

    useEffect(async () => {
        setProperties( propertiesProps)
        console.log(properties)
    }, [])



    return (
        <div>
            <Head>
                <title>Rimoz | Properties</title>
            </Head>
            <h1 className="main">Heres is the list of properties</h1>
            <PropertieGallery />
            <h1 className="main">Com server side props</h1>
            <p></p>
        </div>
    )
}

export default index

And this is what i get in the terminal on vscode

[
  [
    {
      propertiename: 'casa 57',
      photos: [Array],
      id: 'lKOfK8oirnLY5DNEJagH'
    },
    {
      propertiename: 'casa 56',
      photos: [Array],
      id: 'r1IRpreknf5Pd7FqRUqJ'
    },
    {
      photos: [Array],
      propertiename: 'casa 55',
      id: 'H2ADAlP4dyuZJCsYNnor'
    },
    {
      propertiename: 'casa 54',
      photos: [Array],
      id: 'dB8wHXjwFHGB3JoIIGQv'
    },
    {
      propertiename: 'casa 4 ',
      photos: [Array],
      id: 'jApsE2wgxBpdbajuObgx'
    },
    {
      propertiename: 'casa 3 ',
      photos: [Array],
      id: 'mrOJasIuHUXI5ojISSWD'
    },
    {
      photos: [Array],
      propertiename: 'casa 2',
      id: 'rBOG1mXUewKYiH47MbdM'
    },
    {
      photos: [Array],
      propertiename: 'casa 14',
      id: 'c3ozTup7m1ZWIjSSzh7v'
    }
  ]
]

What am i missing here?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Ricardo Moniz
  • 33
  • 3
  • In React setting state is an [asynchronous operation](https://stackoverflow.com/questions/41278385/setstate-doesnt-update-the-state-immediately), `setProperties(propertiesProps)` won't update `properties` immediately. Try moving the `console.log` outside the `useEffect` to see it update. – juliomalves Dec 18 '21 at 23:25
  • @juliomalves i try that too but keeps doing the same, it seems like nothing leave the getServerSideProps and never reaches the component – Ricardo Moniz Dec 18 '21 at 23:49
  • In `getServerSideProps`, if you move the `console.log(properties)` right before the `return` statement, what do you get? – juliomalves Dec 19 '21 at 00:00
  • do you get the list output you got in vscode in the chrome console? – kiranr Dec 19 '21 at 06:52
  • @juliomalves When i do that the array is empty seems the problem is in setting the data on the array but i cant understand why – Ricardo Moniz Dec 22 '21 at 20:36
  • 1
    That's because the `getServerSideProps` function returns before the `onSnapshot` callback executes. If you want to get a Promise with the contents of a query just once use `get()` instead of `onSnapshot()`. See https://cloud.google.com/firestore/docs/query-data/get-data#get_multiple_documents_from_a_collection for further details. – juliomalves Dec 22 '21 at 21:12

0 Answers0