Uncaught ReferenceError: Cannot access 'query' before initialization

[Molnfront]

I just tried the example at: https://react-query-firebase.invertase.dev/firestore/querying-collections and got this error above.

If I move the query before the function it will work, but then I am not able to pass parameters to the querys where clause.

I am using React 16.14.0.

import React from "react";
import { useFirestoreQuery } from "@react-query-firebase/firestore";
import {
  query,
  collection,
  limit,
  QuerySnapshot,
  DocumentData,
} from "firebase/firestore";
import { firestore } from "../firebase";

function Products() {
  // Define a query reference using the Firebase SDK
  const ref = query(collection(firestore, "products"));

  // Provide the query to the hook
  const query = useFirestoreQuery(["products"], ref);

  if (query.isLoading) {
    return <div>Loading...</div>;
  }

  const snapshot = query.data;

  return snapshot.docs.map((docSnapshot) => {
    const data = docSnapshot.data();

    return <div key={docSnapshot.id}>{data.name}</div>;
  });
}

[Molnfront]

Ok, dumping this npm package. I build my own useHooks

[flexbox]

hey @Molnfront

If your problem is solved can you please close the issue? It sparks joy for maintainers ✨

[decanTyme]

That's because there's two query identifiers declared there, the one imported and the const variable where you stored the result of useFirestoreQuery. It will try to use the const query = ... one instead of the import, so doing query(...) wouldn't work. You also get the error because it tried to use the variable before it was declared (and initialized). Renaming one of them should fix it. I think that's an oversight on the docs tho.