Error message: 'query is not a valid function' when using Next.js getServerSideProps with Firebase

I am currently developing an app for an NGO using NextJS and firebase as the primary database. While working on my project, I encountered a concerning issue.

import {
  collection,
  where,
  query,
  getDocs
} from '@firebase/firestore';
import { db } from '../../../services/firebase';

export async function getServerSideProps({query}) {
  
  const user = await getDocs(query(collection(db, 'members'), where('id', '==', query)))
  return {
    props: {
      // VisionInfo: JSON.stringify(user.docs.map(item => item.data()))
      json: JSON.stringify('Hello')
    }
  };
}

In NextJS, when using serverSideProps to fetch Query parameters from the URL, the keyword "query" is necessary. However, this clashes with the same keyword used to fetch firebase documents, resulting in the error message "query is not a function". Is there any workaround to access Query within serverSideProps?

Answer №1

This problem occurs because the parameter "query" is also present in the getServerSideProps function. To resolve this, rename the import from the Firestore SDK (or the query parameter) as follows:

import { query as fireQuery } from '@firebase/firestore';

export async function getServerSideProps({firestoreQuery}) {
  const user = await getDocs(fireQuery(collection(db, 'members'), where('id', '==', firestoreQuery)))
  // use fireQuery here      ^^^
})

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

What techniques can I use to modify an object while it's being iterated through?

I've been attempting to manipulate the object while looping through it, but unfortunately, it's not working. How can I modify it so that the constant patient includes the property lastActivity inside the this.model array? My code looks like this ...

Determining the correct type for a recursive function

I have created a function that is capable of recursively traversing through a nested or non-nested object to search for a specific key and extract its value. const findName = <T extends object>(obj: T, keyToFind: string): T[] => { return Object ...

Manipulating Angular and Typescript to utilize the method's parameter value as a JavaScript object's value

I am currently working with Ionic, Angular, and Typescript, attempting to dynamically set the value of a location based on the parameter passed from a method. Here is the relevant code snippet: async fileWrite(location) { try { const result = a ...

Request with an HTTP header for authentication

Here's a straightforward question that may seem simple to some developers but could be tricky for beginners. So, my question is - how can I send an HTTP request from a browser when a user clicks a button and also add an authorization header to the re ...

Error message from Angular stating that the factory function is not recognized as a function within the Controller

I have encountered similar questions in the past, but they often involve missing injections, and I hope that is not the issue in my case. For my current app project, I am attempting to send a GET request to the server to retrieve a list of modules. Contr ...

Tips for ensuring a module.export function completes its request before assigning the returned value to a variable in another JavaScript file

Within my Node.js application, I am utilizing two JS files. One of these files, latlng.js, contains the following code: async function getPlaceDetails(input) { var locationUrl = 'https://www.google.com'; request(locationUrl, (error, respo ...

Issue: Unrecognized element type in next.js while starting development server

Every time I run npm run dev, I encounter the following error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from th ...

The null object does not have a property addEvenListener and therefore cannot be

My goal is to develop a simple single-page application without using any frameworks, focusing on providing users with tutorials on specific subjects. I am encountering an issue with the javascript code for my page, receiving the following error: Uncaug ...

A guide on transferring data from JavaScript to HTML and efficiently directing it to a Laravel 5 controller

Recently, I have been exploring different ways to connect Javascript with HTML and interact with PHP. Although I am comfortable using plain PHP to send or retrieve data from a PHP backend, I decided to dive into Laravel5 as my PHP framework. So far, it has ...

Add a CSS class to an innerHTML element just a single time

I currently have 2 files available: data.php page.php The data.php file is responsible for fetching a row from a SQL database and sending it to the page.php file. Within the page.php file, there is a JavaScript script that receives this row through AJAX ...

Using selected option from dropdown as a value for a hyperlink

I'm attempting to transfer the chosen value from a dropdown menu to my link. This way, when I click on the specific link, it should trigger the corresponding action based on the ID selected from the dropdown. The alert shows the value, but now I need ...

Is there a specific measurement or scale for the dragging feature in jQuery UI draggables?

I'm interested in adjusting the position of my draggable element based on the distance moved by the mouse. For instance, if the scale is 1:2 and the cursor is moved 10px to the right, then the draggable should move 20px. I already have my draggable ...

Greetings! I am looking for information on how to activate CORS in a Ruby on Rails API application deployed on OpenShift for use with an Angular

My current setup involves a script utilizing Angular to display records fetched from a Rails API REST, which is hosted in OpenShift. In my public/.htaccess file, I have included the following directives: Header add Access-Control-Allow-Origin "*" Header a ...

A guide to using jqGrid: Retrieve the value of a particular cell by double clicking on a row

Is there a way to implement a feature where users can double click on any part of a row and have it open a new HTML page based on the specific content in a cell? For example, I have a table with different counties in New York listed in separate rows: Coun ...

Combining jQuery dataTables and Codeigniter for dynamic rendering using sAjaxSource

I am currently facing an issue while working with dataTables in Codeigniter. I keep encountering the following error message: array_push() expects parameter 1 to be array, null given The resulting output is {"aaData":null} My desired outcome should look ...

NodeJS JSON file write function not updating as expected

I'm working on a task that involves reading an existing JSON file, updating the value within it, and then saving it back. However, I've encountered the following error message: node:internal/modules/cjs/loader:944 throw err; ^ Error: Cannot ...

Add some TD(s) after the td element

The HTML code I currently have is as follows: <tr> <td class="success" rowspan="1">Viability</td> <td data-rowh="-Checksum">Viability-Checksum</td> </tr> <tr> ...

transferring information between two ajax calls upon completion of the first ajax request

Attempting to pass data to jvectormap from an ajax call, using a when function to ensure the code runs after the ajax call has finished loading. The issue I'm facing is that the map appears empty and I encounter an error. Uncaught ReferenceError: ...

Guide to sending checkbox data using jQuery AJAX

I am facing an issue with submitting the form below: <form action="/someurl" method="post"> <input type="hidden" name="token" value="7mLw36HxPTlt4gapxLUKWOpe1GsqA0I5"> <input type="checkbox" class="mychoice" name="name" value="appl ...

What are some strategies for bypassing the restrictions on Cross Origin Requests?

I am currently facing an issue with retrieving a file from the server where my PHP code is hosted, which is a web hosting service. This problem is not unfamiliar to me as I have previously encountered difficulties accessing files from HTML, whether locall ...