Images returned as DocumentReference

[dankerk]

Hi there,

I'm trying to get and display images uploaded through Flamelink, but they are returned to me as an array of DocumentReferences.

How can I get their urls?

headerImage: [
    DocumentReference {
      firestore: [Firestore],
      _delegate: [DocumentReference$1],
      _userDataWriter: [UserDataWriter]
    }
  ],

[dewetvdm]

Hi @dankerk

The correct documentation is here: https://flamelink.github.io/flamelink-js-sdk/#/content

The link posted in your original question was for the old SDK

as for the document reference, you can use the populate function to populate images and relational data https://flamelink.github.io/flamelink-js-sdk/#/content?id=get-examples

[dewetvdm]

examples

app.content.get({ 
  schemaKey: 'page', 
  populate: ['headerImage'] 
})

[dankerk]

Thanks @dewetvdm !

That leads me to another interesting "issue"/topic..

The Firebase client-side SDK cannot access the Storage Bucket server-side.
Please use the admin SDK instead - https://www.npmjs.com/package/firebase-admin

So I switched to the admin sdk, but then it throws:

error - ./node_modules/@google-cloud/storage/build/src/bucket.js:21:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/@google-cloud/storage/build/src/index.js
./node_modules/firebase-admin/lib/storage/storage.js
./node_modules/firebase-admin/lib/firebase-namespace.js
./node_modules/firebase-admin/lib/default-namespace.js
./node_modules/firebase-admin/lib/index.js
./src/utils/flamelink.ts
./src/pages/index.tsx

Did you encounter that before?

I did manage to log out the object for the headerImage, but when I try to use it throws: SerializableError: Error serializing.page.headerImagereturned fromgetStaticPropsin "/page/[slug]".

It seems I would need to get rid of some of the object data. Is this familiar to you?

[dewetvdm]

@dankerk are you running this code server side (example static site generator (gatsby, scully) or nextjs with static/serverside queries etc)?

If so then you will need to make sure that you initialize the SDK with the correct package serverside will require the firebase-admin-sdk and client side the normal web SDK which you seem to be using at the moment)

and easy wat too check is

// server does not have a window object so will be undefined
if (typeof window === 'undefined') { 
 // initialize flamelink with the firebase admin SDK (node SDK)
} else {
 // initialize the flamelink SDK with the firebase web SDK 
}

[dankerk]

@dewetvdm Yes I'm running it server side using nextjs.

It keeps throwing

`error - ./node_modules/@google-cloud/storage/build/src/bucket.js:21:0 Module not found: Can't resolve 'fs'

Import trace for requested module: ./node_modules/@google-cloud/storage/build/src/index.js ./node_modules/firebase-admin/lib/storage/storage.js ./node_modules/firebase-admin/lib/firebase-namespace.js ./node_modules/firebase-admin/lib/default-namespace.js ./node_modules/firebase-admin/lib/index.js ./src/utils/flamelink.ts ./src/pages/index.tsx`

Here I'm initializing flamelink:

`const admin = require("firebase-admin"); const serviceAccount = require('../../private/firebase-service-account-dev.json')

import flamelink from 'flamelink/app' import 'flamelink/content' import 'flamelink/storage'

const firebaseAdminConfig = { credential: admin.credential.cert(serviceAccount), databaseURL: process.env.NEXT_PUBLIC_DATABASE_URL, storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET }

if (!admin.apps.length) { admin.initializeApp(firebaseAdminConfig); }

export const flamelinkApp: flamelink.app.App = flamelink({ firebaseApp: admin, env: 'production', // optional, defaults to production locale: 'en-US', // optional, defaults to en-US dbType: 'cf' // optional, defaults to rtdb - can be 'rtdb' or 'cf' (Realtime DB vs Cloud Firestore) })`

Seems legit, no?

I'm using these versions:

"@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@material-ui/core": "^4.12.3", "@material-ui/icons": "^4.11.2", "@mui/core": "^5.0.0-alpha.49", "@mui/icons-material": "^5.0.0-rc.0", "@mui/material": "^5.0.2", "axios-observable": "^1.3.0", "firebase": "^8.10.0", "firebase-admin": "^8.11.1", "firebase-functions": "^3.15.5", "firebase-tools": "^9.19.0", "flamelink": "^1.0.0-alpha.34", "next": "^11.1.2", "react": "17.0.2", "react-cookie-consent": "^6.4.1", "react-dom": "17.0.2", "react-gtm-module": "^2.0.11", "sanitize-html": "^2.5.2", "styled-components": "^5.3.1"

[dankerk]

My bad. The issue was a mistake on my end.

I had this in my code:

HomePage.getInitialProps = async () => {
// some flamelink code here...

But getInitialProps (especially when appended to the homepage class) runs on the client side so I had to replace it with:

export async function getStaticProps() {
// some flamelink code here...

[dankerk]

Thanks for the support @dewetvdm

For anyone reading this who is running into parsing issues from nextjs like this one: Error serializing ... cannot be serialized as JSON. Please only return JSON serializable data types.

Wrapping this around the response fixes it:

JSON.parse(JSON.stringify(responseData));