The function startAfter() in Firebase Realtime Database (RTDB) does not seem

I'm currently implementing pagination for a list of items using Vuefire, and encountering an error with the following code snippet (the function works properly with startAt() but not with startAfter())

lastVisible is an object within my component's state containing the property expire_date (a UNIX timestamp)

Below is the error message I am receiving

Any suggestions on what might be causing this?

    async seeFurtherGames() {
      var games_ref = db.ref('games')
      console.log("GameBrowser.seeOlderGames()", this.lastVisible, games_ref)
      if (this.lastVisible) {
        var start = this.lastVisible.expire_date
        var query = games_ref.orderByChild('expire_date').startAfter(start).limitToFirst(this.item_limit)
        await this.$bind("games", query)
        this.setLastVisible()
        
      }
    }

Uncaught (in promise) TypeError: games_ref.orderByChild(...).startAfter is not a function
    at _callee3$ (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/GameBrowser.vue?vue&type=script&lang=js&:257)
    at f (chrome-extension://bfnaelmomeimhlpmgjnjophhpkkoljpa/content_script/inpage.js:141)
    at Generator._invoke (chrome-extension://bfnaelmomeimhlpmgjnjophhpkkoljpa/content_script/inpage.js:141)
    at Generator.next (chrome-extension://bfnaelmomeimhlpmgjnjophhpkkoljpa/content_script/inpage.js:141)
    at asyncGeneratorStep (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:9)
    at _next (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:31)
    at eval (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:38)
    at new Promise (<anonymous>)
    at eval (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:27)
    at VueComponent.seeFurtherGames (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/GameBrowser.vue?vue&type=script&lang=js&:270)
javascriptfirebasevue.jsfirebase-realtime-database

Answer №1

In the JavaScript SDK version 8.2.7, Firebase Realtime Database saw the addition of the startAfter and endBefore operations.

Answer №2

Updating Firebase version from v8 to v9 resolved the issue for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting the HTML input textbox onChange event to fire properly?

This is the code I have been working on: <script language="JavaScript"> function toggle() { if (this.value=='1') { document.getElementById('dbOn').style.visibility='visible'; } el ...

javascripthtmltextboxonchange

transferring information between pages in nextjs

Currently in the process of developing a website, specifically working on a registration page for user sign-ups. My main challenge at the moment is validating email addresses without using Links. I need to redirect users to a new page where they can see if ...

javascriptreactjsnode.jsnext.js

Converting a multi-dimensional array from PHP to JavaScript in a way that cannot be accessed using

I have been working on passing a multidimensional array from PHP (with dynamically inserted values in a real scenario) to JavaScript. However, I am facing an issue where the values are not being printed when using a loop. Upon checking, the array[0].length ...

javascriptphparraysjsonmultidimensional-array

Change the text of a button by using an input field

How can I dynamically update button text based on input field value? <input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field"> <button id="rzp-button1" class="paynowbutton w-button">Pay Now</button> I want the bu ...

javascriptjqueryhtml

HTTP GET request not updating data

I'm experimenting with AngularJS and trying out some examples: Here's the HTML code snippet: <html ng-app="myApp"> <body ng-controller="JokesController"> <h1>{{ joke }}<h1> </body> </html> A ...

javascripthtmlangularjsangularjs-directiveangularjs-service

Tips for incorporating a callBack function when the screen changes in react-native:

Is there a way to implement a callback function that executes whenever the screen changes, such as moving from the home screen to the about screen? Situation I would like to create a global stack that triggers a callback function whenever any navigation o ...

javascriptreact-nativereact-navigationclass-completion

Tips for displaying placeholder in cropper following an upload

I am currently working with vue-cropper 4.1 using cropperjs in combination with Nuxt 2.13. When my cropper loads, it displays a placeholder image. However, after choosing and uploading a new image, the cropper still shows the previously chosen image instea ...

vue.jsvuejs2nuxt.jscropperjscropper

I would like to know how to create a dropdown menu that shows the country name, flag, and code based on the

I have successfully generated the telephone input field. One requirement is to display the Country flag along with the country name as soon as the dropdown is selected. Another requirement is that once the country is selected, it should display the countr ...

javascripthtmlcss

Enhancing transparency with a touch of background color

After successfully exporting my chart created in canvas as an image file, I noticed that the image turned out to be transparent without any background. Is there a way through code to add a background color to this existing image obtained from canvas? For ...

javascriptphpcsshtmlcanvas

Enhabling Effortless Button Activation & Sustained Navigation State: Integrating Dynamic Navigation in React

"I am facing a React challenge and seeking assistance to implement a specific functionality with a button. At present, the button starts with a false state, but I intend for it to automatically activate and reveal a navigation component (nav) when the ...

javascriptnode.jsreactjsreact-hooksreact-navigation

How to Align Text at the Center of a Line in Three.js

Exploring What I Possess. https://i.sstatic.net/nAtmp.png Setting My Goals: https://i.sstatic.net/svcxa.png Addressing My Queries: In the realm of three.js, how can I transform position x and y into browser coordinates to perfectly align text in th ...

javascripthtmlthree.js

The jQuery Multiselect filter contradicts the functionality of single select feature

http://jsfiddle.net/rH2K6/ <-- The Single Select feature is functioning correctly in this example. $("select").multiselect({ multiple: false, click: function(event, ui){ } http://jsfiddle.net/d3CLM/ <-- The Single Select breaks down in this sc ...

javascriptjqueryjquery-ui-multiselect

What is the process for performing a redirection in Node JS?

I have been working on a task to redirect a page to the home page with the route '/search' upon form submission. Within my submit.html file, there is a form that utilizes the '/submit' post method to submit the form data when the submit ...

javascriptnode.jsformshttp-redirectexpress

It appears that the $http request is causing an endless $digest Loop

Looking to determine a user's status in my AngularJS app in order to display specific functionality content, here is the HTML code in my view: <span ng-show="authService.isSuperUser()">You are a Super User</span> To check if the user has ...

javascriptangularjs

Issue with functionality of Bootstrap 4 Checkbox accordion

I am trying to achieve something similar to this example: https://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets Instead of using a button, I want to use a checkbox. I want the collapse effect to occur when the checkbox is checked. < ...

javascriptbootstrap-4

Using jQuery Mobile: Implementing listview data-filter for multiple data sets

I'm working on a JQM page with two data-role="listview" elements. Both of them are using the same data set, but one listview displays only text while the other includes icons as well. My goal is to implement the data-filter="true" option for both lis ...

javascriptajaxlistviewfilterjquery-mobile

Trigger functions when the window is scrolled, resized, or when the document is fully loaded

I have a few functions that need to be executed under specific conditions: window.scroll window.resize document.ready For example: <script> function myFunction1(data){ /*code*/ } function myFunction2(data){ /*code*/ } ...

javascriptjquery

Ways to extract information from a dynamically loaded webpage

Is there a way to extract data from a news website that automatically reloads at set time intervals? I want to use this data on my own website as information, whether it's in the form of images or text. Can anyone guide me on how to retrieve data from ...

javascriptangularjsnode.js

JavaScript Discord bot encounters an issue: .sendMessage function is not recognized

Currently, I am developing a bot and testing its messaging functionality using .sendMessage method. (I prefer the bot not to send messages upon receiving any input, hence avoiding the use of: bot.on("message", function(message) {}); However, I am encoun ...

javascriptnpmbotsnpm-installdiscord

Angular 6: TypeError - The function you are trying to use is not recognized as a valid function, even though it should be

I'm currently facing a puzzling issue where I'm encountering the ERROR TypeError: "_this.device.addKeysToObj is not a function". Despite having implemented the function, I can't figure out why it's not functioning properly or callable. ...

javascriptangulartypescript