Firestore -- refactor a v8 getQuery for v9

Question

I'm trying to refactor this repo (which I'm using as a tutorial for React, Redux and useFirestore) to work with Firestore web version 9. As I plod through the many errors, I'm stuck on this query.limit is not a function and I'm not sure how to fix it.

import { CollectionReference, Query } from "@firebase/firestore-types";

import { CollectionOptions } from "firebase-config/queryOptions";
import getFirestoreRef from "./getFirestoreRef";

const getQuery = (collection: string, options?: CollectionOptions) => {
  const baseQuery: CollectionReference = getFirestoreRef(collection);
  let query: Query = baseQuery;
  if (options && options.queries) {
    const { queries } = options;
    queries.forEach(({ attribute, operator, value }) => {
      query = query.where(attribute, operator, value);
    });
  }

  if (options && options.sort) {
    const { attribute, order } = options.sort;
    query = query.orderBy(attribute, order);
  }

  if (options && options.limit) {
    query = query.limit(options.limit); // query.limit is not a function
  }

  return query;
};

export default getQuery;

Answer 1

The Firebase documentation has side-by-side examples of the v8 and v9 syntax. If we look there on querying the database and ordering and limiting data , it shows for example that this code in the namespaced API:

citiesRef.orderBy("name").limit(3)

Translates to this in the modular API:

 import { query, orderBy, limit } from "firebase/firestore"; const q = query(citiesRef, orderBy("name"), limit(3));

Which should get you halfway through the conversion already.

For the where clauses of the query, you'll want to build an array of them, rather than constantly reassign the q variable. You can then pass the array on filter conditions to the query function too.