I’m using React Redux Toolkit with Firebase Firestore to manage a shopping cart feature. I’ve set up a query using useGetCartItemsQuery from CartItemsSlice to fetch cart items based on the current user’s UID. However, the cart items quantity is only updated and displayed in the cart widget when I toggle the drawer component. Upon page refresh, the cart items quantity isn’t displayed until I interact with the drawer again.

How can I ensure that the cart items quantity is immediately displayed in the cart widget upon page load or refresh without needing to toggle the drawer component?

Query:

export const cartItemsApi = createApi({
  reducerPath: "cartItemsApi",
  baseQuery: (arg) => arg,
  tagTypes: ["cartItems"],
  endpoints: (builder) => ({
    getCartItems: builder.query<any, string | undefined>({
      queryFn: async (uid: string) => {
        if (!uid) {
          return { data: [] };
        }

        const cartItemsRef = doc(db, "carts", uid);
        return new Promise((resolve) => {
          const unsub = onSnapshot(cartItemsRef, (snapshot) => {
            const data: CartItems[] = snapshot.data()?.items;
            resolve({ data });
          });

          return () => unsub();
        });
      },
    }),
  }),
});

Cart

export const Cart = () => {
  const [cart, setCart] = useState({
    right: false,
  });
  const toggleDrawer = useToggleDrawer(setCart, "right");
  const user = auth.currentUser;
  const { data: cartItems } = useGetCartItemsQuery(user?.uid);

  return (
    <>
      <CartWidget
        cartItemsCount={cartItems?.length}
        toggleDrawer={toggleDrawer(!cart.right)}
      />
      <Drawer
        anchor="right"
        open={cart.right}
        onClose={toggleDrawer(!cart.right)}
        sx={{ position: "relative" }}
      >
      </Drawer>
    </>
  );
};