outputting data using firestore where doesn't work react

Question

I want to only render data that was created by a specific user.

To do this, when creating a card, the author field was added, which is equal to user.uid.

When displaying, I want to use where and display only data where the author is equal to user.uid of the current user.

But all data is displayed and nothing works

Menu

function Menu() {
  const [word, setWord] = useState("");
  const [translate, setTranslate] = useState("");
  const [note, setNote] = useState("");
  let [searchInput, setSearchInput] = useState("");
  const [data, setData] = useState([]);
  const [warn, setWarn] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [filteredData, setFilteredData] = useState([]);
  const { user } = UserAuth();
  
  const fetchProduct = async () => {
    if (!user) {
      setData([]);
      setIsLoading(false);
    }
    const ref = collection(db, "langcards-db");
    const q = query(ref, where("author", "==", user.uid));
    const unsubscribe = onSnapshot(
      q,
      { includeMetadataChanges: true },
      (querySnapshot) => {
        const arr = [];
        querySnapshot.forEach((doc) => {
          arr.push({
            ...doc.data(),
            id: doc.id,
          });
        });
        setData(arr);
        setIsLoading(false);
      }
    );
    return () => {
      unsubscribe();
    };
  };

  useEffect(() => {
    fetchProduct();

  }, []);

  useEffect(() => {
    fetchProduct();
  }, [user]);

  return (
    <div className="main-inner">
      {isLoading ? (
        <Loader />
      ) : (
        <div className="content">
          <Routes>
            <Route
              path="/"
              element={<Layout onSearch={() => onSearchF()} data={data} />}
            >
              <Route index element={<Home data={data} num={data.length} />} />
              <Route
                path="addcard"
                element={
                  <AddCard
                    onChangeWord={onChangeWord}
                    onChangeNote={onChangeNote}
                    onChangeTranslate={onChangeTranslate}
                    onSubmit={onSubmit}
                    word={word}
                    translate={translate}
                    note={note}
                    warn={warn}
                    resetFormAdd={resetFormAdd}
                  />
                }
              />
              <Route
                path="saved"
                element={<Saved data={data} setData={setData} />}
              />
              <Route
                path="search"
                element={
                  <Search
                    data={data}
                    ons={onSearchF}
                    filtered={filteredData}
                    searchInput={searchInput}
                  />
                }
              />
              <Route
                path="account"
                element={
                  <ProtectedRoute>
                    <Account />
                  </ProtectedRoute>
                }
              />
              <Route path="signup" element={<SignUp />} />
              <Route path="login" element={<Login />} />
            </Route>
          </Routes>
          <div>
            <Outlet />
          </div>
        </div>
      )}
    </div>
  );
}
export default Menu

Answer 1

At first you are trying to get documents using the query method but you are not following the query syntax and you have to use the query keyword. It looks like you are adding a document with an author field in the langcards-db collection and querying for name-db collection.

Here’s how this query should be executed :

import { collection, query, where, getDocs } from "firebase/firestore";
const ref = collection(db, "name-db");
if(!user) {
  setData([]);
  return;
}
const q = query(ref, where('author','==', user.uid))
const querySnapshot = await getDocs(q);
  const arr = [];
  querySnapshot.forEach((doc) => {
    arr.push({
      ...doc.data(),
      id: doc.id,
    });
  });
  setData(arr);
}

For more information about query go through these docs.