feat(HOCs): option to re-render HOCs based on auth state change

[klis87]

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

What is the current behavior?
After user login, items should be fetched from database. Currently, browser refresh is required, which shouldn't be necessary.

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.

1. Go to https://www.webpackbin.com/bins/-L1PEJ-wkb21zcAApIG8
2. Click Login, user is logged in but no todos are loaded
3. Refresh the page - now todos are loaded, but it required page reload

What is the expected behavior?
Todos should be fetched after user is logged in, without page refresh being required

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?
firebase: 4.8.1, react-redux-firebase: 2.0.0-rc.1

[prescottprue]

@klis87 This is currently expected behavior, currently HOCs (such as firebaseConnect) only re-render when the props change or the listener paths change. The state based query example shows loading auth in a parent component and passing it as a prop.

Reloading based on auth state change by default can cause unexpected re-renders in other situations (i.e. components wrapped in firebaseConnect not using auth state). That can be pretty troublesome in large applications using firebaseConnect at many levels.

The plan has been to offer a config option for this in the future (something like reloadOnAuthStateChange), but there hasn't been work on it yet.

[prescottprue]

@klis87 For clarity, I included a note about this in the updates of the roadmap for the v2.0.0 release.

Going to switch this issue to a place to track the new feature and move it to the Project for v2.1.0

[klis87]

@prescottprue That's awesome this is going to be included in core! For now, I tried to make some workaround:

export default compose(
  firebaseConnect(({ profile }) => [
    { path: '/todos', queryParams: [`equalTo=${profile}`] },
  ]),
  connect(({ firebase: { data: { todos } } }) => ({
    todos,
  })),
)(Todos);

... <Todos profile={profile} />

Unfortunately then no todo is displayed as equalTo doesn't hit anything. Without equalTo, it doesn't work either - todos aren't fetched after logging like in above example - passing profile doesn't change anything. Could you please advise there is anything I am doing wrong?

[prescottprue]

@klis87 If you are using equalTo you have to first provide the parameter which you are trying to check equality with equalTo for (i.e. orderByChild). Otherwise the query will not know what you are trying to look for the equalTo To match.

You need something like:

export default compose(
  firebaseConnect(({ profile }) => [
    {
       path: '/todos',
       queryParams: [
          'orderByChild=createdBy', // parameter which will be check for equality
          `equalTo=${profile}` // the equalTo check
       ]
    },
  ]),
  connect(({ firebase: { data: { todos } } }) => ({
    todos,
  })),
)(Todos);

Other thoughts:

Did you try confirming that data is loaded in a parent component first as shown in the state based query example?

If your profile prop is not yet available, that could cause you to be creating a query that you are not intending to (with a query param 'equalTo=undefined').

[klis87]

@prescottprue in my case profile is never undefined. For logged out user it is equal to { isLoaded: true, isEmpty: true }, for authenticated { isLoaded: true, isEmpty: true ...rest }. However, I really don't want to use any queryParams, my use case is the following - I have dababase objects which are public (common for all users), but I want them to be loaded only after user signed in, I don't want anything to be fetched for anonymous user.

[prescottprue]

@klis87 Passing as a prop as done in the state based query example should work great for that then.

[klis87]

@prescottprue I try but without any effect. Please see https://www.webpackbin.com/bins/-L1hFJz7jujeHpXvI_oE