How can you serialize a GeoPoint object for use in getServerSideProps in Next.js?

65 Views Asked by At

I am reading data from a firestore doc and wanted to pass it in as props to my component. However, one of the data points in a firestore GeoPoint object. This is not serializable JSON, as it's a complex object that has functions etc.

This is the simple call:

export async function getServerSideProps() {
  const postsRef = query(collection(db, "posts"), orderBy("likes", "desc"));

  const posts = await getDocs(postsRef);
  const data = posts.docs.map((doc) => doc.data()); // includes a `location` key with GeoPoint data

  return { props: { data } };
}

I want to preserve the format and nature of this data point rather than converting it to something else. My fear is that I'll have to start storing the data in two separate buckets: one with GeoPoint data that I call for on the client, and one with the rest of the doc data. Or, alternatively, make the same call twice and filter in/out data where applicable.

Is this the case? IS there a better way to deal with GeoPoint data in a NextJS ssr app?

0

There are 0 best solutions below