CODEWITHSUNDEEP
firebasenext.js
Daltron
Daltron

Reputation: 1866

NextJS: Accessing Google Firestore data

So I'm not sure how to do this exactly. Here is what I have:

In my Index.js I have

Index.getInitialProps = async function () {
  const firebase = require('firebase')

  const firebaseConfig = {
    apiKey: "examplezbxW_9nKoUjas",
    authDomain: "example-prod.firebaseapp.com",
    databaseURL: "https://example-prod.firebaseio.com",
    projectId: "example-prod",
    storageBucket: "example-prod.appspot.com",
    messagingSenderId: "1234567890",
    appId: "1:1234567890:web:1234567890"
  };

  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)
  }

  const db = firebase.firestore()

  const data = db.collection('data').get()

  return {
    data
  }
}

This gives me an error of FirebaseError: projectId must be a string in FirebaseApp.options

(Maybe I need to run the firebase node package and login...)

It says the error is occurring at this line const db = firebase.firestore()

Any help is appreciated. Maybe this isn't the spot I should be trying to load firestore data... not sure.

I also considered creating a node server and doing it that way, but ideally, I'd like to avoid that.

Upvotes: 1

Views: 1726

Answers (1)

Daltron
Daltron

Reputation: 1866

Okay, so there was a couple changes I made to fix this.

I moved my firebase initialization to another file and that file looked like this:

import firebase from 'firebase/app'
import 'firebase/firestore'

export function loadDB() {
  try {
    var config = {
      apiKey: "YOUR INFO HERE",
      authDomain: "YOUR INFO HERE.firebaseapp.com",
      databaseURL: "https://YOUR INFO HERE.firebaseio.com",
      projectId: "YOUR INFO HERE",
      storageBucket: "YOUR INFO HERE.appspot.com",
      messagingSenderId: "YOUR INFO HERE",
      appId: "YOUR INFO HERE"
    };
    firebase.initializeApp(config);
  } catch (err) {
    // we skip the "already exists" message which is
    // not an actual error when we're hot-reloading
    if (!/already exists/.test(err.message)) {
      console.error('Firebase initialization error', err.stack);
    }
  }

  return firebase;
}

Then, in my NextJS componenet, in the getInitialProps method, I have:

import { loadDB } from '../lib/db'

Index.getInitialProps = async function () {
  const db = await loadDB()
  let data = []
  const querySnapshot = await db.firestore().collection('data').get()
  querySnapshot.forEach(doc => {
    data.push(doc.data())
  })

  return {
    data
  }
}

Upvotes: 4

Related Questions