Encountering difficulties reading data from a database in a Next.js/Firebase application

Question

Encountering difficulties reading data from a database in a Next.js/Firebase application

I am encountering a problem within a nextJS app that I developed on Firebase.

In my realtime DB, I have some stored data that I want to read using a component.

Below is my firebase/config.js file:

import {initializeApp} from "firebase/app";
import {getDatabase} from "firebase/database";

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_WEB_API_KEY,
    databaseURL: process.env.NEXT_PUBLIC_DATABASE_URL,
    projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  };

const firebaseApp = initializeApp(firebaseConfig);
export const firebaseDatabase = getDatabase(firebaseApp);

I used this configuration previously to write data to the DB.

Now, I am working on a component to read the data as shown below:

import {firebaseDatabase} from '../../firebase/config';
// (Changed) import {ref} from "firebase/database";
import {onValue,ref} from "firebase/database";

export default function ShowData() {
  const dbRef = ref(firebaseDatabase, 'Restaurant')

  console.log('Test onValue')
  onValue(dbRef, (snapshot) => {
          console.log(snapshot.val())
        },
        (error) => {
          console.log('Error(onValue): '+error);
        }
  );

  return (
        <div>
      <div>ShowData</div>
      {/* ...... */}
        </div>
  )
} /* End of ShowData */

Even though the error message regarding 'Property 'on' does not exist on type 'DatabaseReference' has disappeared after making code changes,

I am still not getting the expected output displayed.

However, I can verify that there are 8 items under Restaurant in my DB.

Can anyone identify what might be going wrong and suggest a solution?

For testing purposes, I've set my rules as follows:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

javascript firebase next.js firebase-realtime-database

Answer 1

Answer №1

It appears that there may be some confusion between the Firebase JS SDK Web modular API and Web namespaced API.

Consider a database structured as follows:

{
  "Restaurants": {
    "RestaurantID": {
      "name": "Restaurant Name",
      "rating": 5
    }
  }
}

If you want to monitor changes in the Restaurants database or any subpath, you can utilize the following code snippet:

import { firebaseDatabase } from '../firebase/config';
import { ref, onValue } from "firebase/database";

export default function Home() {

  const dbRef = ref(firebaseDatabase, 'Restaurants');
  onValue(dbRef, (snapshot) => {
    const data = snapshot.val();
    console.log(data);
  });

}

Keep in mind that the onValue method is initially triggered upon attaching the listener and subsequently whenever there are modifications in the data, including its children. For further guidance on reading data from Realtime Database, refer to this documentation.

Answer 2

It appears that there may be some confusion between the Firebase JS SDK Web modular API and Web namespaced API.

Consider a database structured as follows:

{
  "Restaurants": {
    "RestaurantID": {
      "name": "Restaurant Name",
      "rating": 5
    }
  }
}

If you want to monitor changes in the Restaurants database or any subpath, you can utilize the following code snippet:

import { firebaseDatabase } from '../firebase/config';
import { ref, onValue } from "firebase/database";

export default function Home() {

  const dbRef = ref(firebaseDatabase, 'Restaurants');
  onValue(dbRef, (snapshot) => {
    const data = snapshot.val();
    console.log(data);
  });

}

Keep in mind that the onValue method is initially triggered upon attaching the listener and subsequently whenever there are modifications in the data, including its children. For further guidance on reading data from Realtime Database, refer to this documentation.

Answer 3

Answer №2

When you import { ref } from "firebase/database", you are using the modular version of the JS SDK but your code for listening to Realtime Database data is from the namespaced JS SDK (prior to V9).

To resolve this issue, follow these steps. More information can be found in the documentation.

import { ref, onValue } from "firebase/database"; // <= See onValue

// ...

const dbRef = ref(firebaseDatabase, 'Restaurant')
onValue(dbRef, (snapshot) => {
  console.log(snapshot.val());
  // ...
});

Remember that you can also include a cancelCallback to handle errors:

onValue(
  dbRef,
  (snapshot) => {
    console.log(snapshot.val());
    // ...
  },
  (error) => {
    console.log(error);
  }
);

Answer 4

When you import { ref } from "firebase/database", you are using the modular version of the JS SDK but your code for listening to Realtime Database data is from the namespaced JS SDK (prior to V9).

To resolve this issue, follow these steps. More information can be found in the documentation.

import { ref, onValue } from "firebase/database"; // <= See onValue

// ...

const dbRef = ref(firebaseDatabase, 'Restaurant')
onValue(dbRef, (snapshot) => {
  console.log(snapshot.val());
  // ...
});

Remember that you can also include a cancelCallback to handle errors:

onValue(
  dbRef,
  (snapshot) => {
    console.log(snapshot.val());
    // ...
  },
  (error) => {
    console.log(error);
  }
);

Answer 5

Answer №3

The challenge you are encountering arises from attempting to utilize the on method with a DatabaseReference object, which does not support this method. Instead, consider using the onValue method provided by the Firebase SDK.

Below is the revised code:

import { firebaseDatabase } from '../../firebase/config';
import { onValue, ref } from 'firebase/database';

export default function DisplayData() {
    const dbReference = ref(firebaseDatabase, 'Restaurant');

    // Add an asynchronous callback to fetch the data at our DB reference:
    onValue(dbReference, (snapshot) => {
        console.log(snapshot.val());
    }, (error) => {
        console.log('Error(onValue): ' + error);
    });

    return (
        <div>
            <div>DisplayData</div>
            {/* ...... */}
        </div>
     );
     } /* End of DisplayData */

Remember that the above code snippet will simply log the data to the console. If you intend to exhibit the data in your component, establish a state variable to store the data and update the state upon data alterations. Here's an example employing React hooks:

import { useEffect, useState } from 'react';
import { firebaseDatabase } from '../../firebase/config';
import { onValue, ref } from 'firebase/database';

export default function DisplayData() {
    const [data, setData] = useState(null);

    useEffect(() => {
        const dbReference = ref(firebaseDatabase, 'Restaurant');

        const unsubscribe = onValue(dbReference, (snapshot) => {
            setData(snapshot.val());
        }, (error) => {
            console.log('Error(onValue): ' + error);
        });

        return () => {
            unsubscribe();
        };
    }, []);

    return (
        <div>
            <div>DisplayData</div>
            {data && (
                <ul>
                    {Object.entries(data).map

Answer 6

The challenge you are encountering arises from attempting to utilize the on method with a DatabaseReference object, which does not support this method. Instead, consider using the onValue method provided by the Firebase SDK.

Below is the revised code:

import { firebaseDatabase } from '../../firebase/config';
import { onValue, ref } from 'firebase/database';

export default function DisplayData() {
    const dbReference = ref(firebaseDatabase, 'Restaurant');

    // Add an asynchronous callback to fetch the data at our DB reference:
    onValue(dbReference, (snapshot) => {
        console.log(snapshot.val());
    }, (error) => {
        console.log('Error(onValue): ' + error);
    });

    return (
        <div>
            <div>DisplayData</div>
            {/* ...... */}
        </div>
     );
     } /* End of DisplayData */

Remember that the above code snippet will simply log the data to the console. If you intend to exhibit the data in your component, establish a state variable to store the data and update the state upon data alterations. Here's an example employing React hooks:

import { useEffect, useState } from 'react';
import { firebaseDatabase } from '../../firebase/config';
import { onValue, ref } from 'firebase/database';

export default function DisplayData() {
    const [data, setData] = useState(null);

    useEffect(() => {
        const dbReference = ref(firebaseDatabase, 'Restaurant');

        const unsubscribe = onValue(dbReference, (snapshot) => {
            setData(snapshot.val());
        }, (error) => {
            console.log('Error(onValue): ' + error);
        });

        return () => {
            unsubscribe();
        };
    }, []);

    return (
        <div>
            <div>DisplayData</div>
            {data && (
                <ul>
                    {Object.entries(data).map

Encountering difficulties reading data from a database in a Next.js/Firebase application

Answer №1

Answer №2

Answer №3

Similar questions

BoostDock, execute tasks exclusively in select workspaces

Error Encountered in Reactjs: TypeError When Looping Through State Array to Render JSX Component

Parcel React component library throws an error stating that "require is not defined

Creating an object that tracks the frequency of each element from another object using JavaScript

Getting the input from an HTML editor and inserting it into a textarea using JavaScript

Avoid the issue of having duplicate user ids by implementing a locked thread feature within Next.js

Steps for adjusting the matMenuTriggerFor area so it only triggers when hovering over the arrow

WebDriver encounters difficulty clicking on a certificate error popup window

Encountering the "Error: JSON.parse: unexpected character" when trying to retrieve JSON data using AngularJS

Transitioning from using lerna to adopting pnpm

The MaterialUI Datagrid is throwing an error message for an Invalid Hook Call

I'm experiencing an issue with loading the GeoJSON file on my localhost

Vue's TreeView component has been encountering issues with accurately displaying the contents of sub

Struggling to transfer a specific row from a grid to a fresh window in extjs

Php/JavaScript Error: Identifier Not Found

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

I am facing an issue where my localhost keeps redirecting multiple times due to the combination of NextJs 13

Determine the presence of an image by using a wildcard in the URL

Turn off Chrome 69's autofill functionality

Combining Multiple Arrays into One | Node.js