Data Type definition

Hi,

I have been using your NPM package for a while now and I love it. Currently I am using Typescript + React Native for my project.

I came across a Type definition and wondert if was necessary.

const [values, loading, error] = useCollectionData<MyType[]>(ref);

In the line above I would expect values to be a type of: MyType[]. Instead it returned: values: Data<MyType[], "", "">[] | undefined

Is it a possibility to remove the wrapper?

Thank you, Bart

[wolfib]

@chaosLegacy I just ran into a very similar issue: typing a firestore query required using a converter and as soon as I tried that I ran into an infinite loop.

What solved the problem for me was moving the definition of the converter out of the React component. I’m guessing that defining the converter in the component causes useIsFirestoreQueryEqual in the firestore hooks to believe it’s seeing a new query all the time and therefore triggering a rerender.

[chaosLegacy]

Hi, I’m new to firebase, and I found these hooks pretty much useful, but I have a little problem.

I’m using firebase ^9.6.1 along with react-firebase-hooks 4.0.1

This is the piece of code that I use to retreive my messages from firestore The type Post that i’ passing to useCollectionData seems generating an error: see below

    const messagesRef = collection(firestore, 'messages');
    const q = query(messagesRef, orderBy('createdAt'), limit(25));

    const [messages] = useCollectionData<Post[]>(q, { idField: 'id' });

Argument of type 'Query<DocumentData>' is not assignable to parameter of type 'Query<Post[]>'.
  Types of property 'converter' are incompatible.
    Type 'FirestoreDataConverter<DocumentData> | null' is not assignable to type 'FirestoreDataConverter<Post[]> | null'.
      Type 'FirestoreDataConverter<DocumentData>' is not assignable to type 'FirestoreDataConverter<Post[]>'.
        The types returned by 'fromFirestore(...)' are incompatible between these types.
          Type 'DocumentData' is not assignable to type 'Post[]'

Has anyone faced a similar issue? It seems that someone else had the same issue, it’s related to the fact that with firebase v9 defines its types, so it’s no longer possible to cast directly, instead use the built in FirebaseDataConverter https://github.com/CSFrequency/react-firebase-hooks/issues/180#issuecomment-962420543

I did that

    const postConverter = {
        toFirestore(post: WithFieldValue<Post>): DocumentData {
            debugger
            return { text: post.text, id: post.id };
        },
        fromFirestore(
            snapshot: QueryDocumentSnapshot,
            options: SnapshotOptions
        ): Post {
            debugger
            const data = snapshot.data(options)!;
            return {
                id: data.idField,
                text: data.text,
                uid: data.uid
            }
        }
    };

and I hooked it to my query

    const messagesRef = collection(firestore, 'messages');
        const q = query(messagesRef, orderBy('createdAt'), limit(25)).withConverter(postConverter); // <---- here

    const [messages] = useCollectionData<Post[]>(q, { idField: 'id' });

Now I get an infinite loop in my code saying:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

Am I doing something wrong ? 😕