Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using @client and @resolve on the same class causes @resolve to be called twice #128

Open
liamzdenek opened this issue Jul 13, 2017 · 1 comment

Comments

@liamzdenek
Copy link

Reproduction test case

import React, {Component} from 'react'; 
import { resolve, client } from "react-resolver";
import Promise from 'bluebird';

export class SearchPage extends Component {                                        
    render() {
        console.log("Re-Rendering: ", this.props.user);                               
        return <div>
            Prop: {this.props.user}
        </div>
    }
}
// uncomment this and you'll see "Waiting on response" and "Resolving" repeated twice in the console
/*
@client(() => {
    return <div>Loading...</div>
})
 */
@resolve({
    "user": function(props) {
        console.log("Waiting on response, ", props);
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                console.log("Resolving");
                resolve("ayyyyyy");
            }, 5000)
        })
    }
})
export default class InnerSearchPage extends SearchPage {};

Expected Output
[with or without server side rendering, eg, React Router switching pages. This is the observed behavior without @client(...)]

Waiting on response,  Object { [abridged] }
Resolving
USER PROP:  ayyyyyy

Actual Output
[with or without server side rendering]

Waiting on response,  Object { [abridged] }
Resolving
USER PROP:  ayyyyyy
Waiting on response,  Object { [abridged] }
Resolving
USER PROP:  ayyyyyy

Notes

I'm using server-side rendering, but the behavior is unchanged when I remove window.__REACT_RESOLVER_PAYLOAD__.
I am using HOC as a parent of this component.
Some Versions. I don't know how much of this is relevant.

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"react-resolver": "^3.1.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"redux": "^3.7.0",
@arn-the-long-beard
Copy link

arn-the-long-beard commented Aug 23, 2017

Hei.

I am actually having a similar problems. I am making an isomorphic react. I use the window.REACT_RESOLVER_PAYLOAD

The observation is:

  • the first time I do server rendering, then the first client rendering fetch the data from window.REACT_RESOLVER_PAYLOAD
  • I get the @resolve({ user })called every-time on navigation on and using client rendering. It looks like the user data get's lost. I never changed the data from the user, and I passed it to the children as props for an header, footer and mainPage component,s and then as context for children component inside mainPage.
    I will tell you if I succeed to find out what the issue is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants