React-redux-firebase: bug(types): wrong types for firebaseConnect

[lazarljubenovic]

Do you want to request a feature or report a bug?

Bug.

(If this is a usage question, please do not post it here—post it on gitter. If this is not a “feature” or a “bug”, or the phrase “How do I...?” applies, then it's probably a usage question.)

What is the current behavior?

Writing

const firebaseConnected = firebaseConnect(() => [
  { path: 'gameScores' },
])

causes

TypeScript error: Argument of type '() => { path: string; }[]' is not assignable to parameter of type 'string[] | mapper<{}, string[]> | undefined'.
  Type '() => { path: string; }[]' is not assignable to type 'mapper<{}, string[]>'.
    Type '{ path: string; }[]' is not assignable to type 'string[]'.
      Type '{ path: string; }' is not assignable to type 'string'.  TS2345

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.

I think it's trivial, but I can make a Blitz if needed.

What is the expected behavior?

I should be able to use the extended (non-string) notation when connecting.

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?

Tested with a local build of the current tip of v3 branch, as well as the @next package from npm; fails on both with the same error.

Gonna try fixing it now, but in case I fail, hopefully someone else can chime in. :sparkles:

[prescottprue]

@lazarljubenovic I have noticed that the types on the next branch aren't perfect as well. I have started updating some of them and included a typescript app example to test, so I will check into this one. @rscotten has also been a huge help in updating them, so one of us should be able to get to it soon.

[lazarljubenovic]

@prescottprue Thanks for the update! I've changed the .d.ts locally like this:

export interface FirebaseConnectQueryObject {
  path: string
  type?: 'value' | 'once' | 'child_added' | 'child_removed' | 'child_changed' | 'child_moved'
  queryParams?: string[]
}

export type FirebaseConnectQuery = (FirebaseConnectQueryObject | string)[]

/**
 * React HOC that attaches/detaches Firebase Real Time Database listeners on mount/unmount
 */
export function firebaseConnect<ProfileType, TInner = {}>(
  connect?: mapper<TInner, FirebaseConnectQuery> | FirebaseConnectQuery
): InferableComponentEnhancerWithProps<
  TInner & WithFirebaseProps<ProfileType>,
  WithFirebaseProps<ProfileType>
>

It's around like 450. It certainly fixes the problem at hand, but now I'm battling some other weird issue for an hour, caused apparently by mismatch of installed Firebases.

Various combinations I'm trying are giving me various results, all with some super-weird errors. This is happening when I link the local clone of react-redux-firebase.

Then I tried just editing the index.d.ts of this module directly from node_modules, but seems like Babel is caching the old version or something, so I cannot “really” test my solution, although I'm fairly certain it works :sweat_smile:

[lazarljubenovic]

Apparently I swapped import firebase from 'firebase' with import firebase from 'firebase/app' (or vice versa) while fiddling with versions 4 and 5 or firebase, which caused the mismatch in types. Few.

[rscotten]

@lazarljubenovic @prescottprue I don't use the Firebase Realtime DB, so I can't help with any of those types. I just did my best based on a quick glance at the react-redux-firebase docs. If you want my feedback regarding Firestore, Storage, or Auth, I'm happy to help! :)

[prescottprue]

I actually ran into this as well when using a newer version of the Firebase SDK than I had before. This should be fixed in v3.0.0-alpha.15 since I switched them over to any for now.

Open to ideas getting more specific with it in future typings. Thanks for reporting