duplicate call all component under container, at twice access view usin react-route in client

[kasselTrankos]

Hi,
Im using react router, and call all twice when access to page twice or more
call render, fetch all twice.

[kasselTrankos]

I'll explain better.
When uses react-route in client, there is navigation like client only.
So when uses Create container, duplicate call, for render, fetch and every one.

[RickWong]

Hi @kasselTrankos could you create a minimal repo/gist to reproduce the bug?

[kasselTrankos]

yes i got one
https://github.com/kasselTrankos/react-isomorphic--mongodb
you can force server responds.
if you navigate through client you can see call async twicce( accounts)
tks

[kasselTrankos]

hi @RickWong , could you see what im say?.tks

[broveloper]

👍

I'm not sure if it's the intended behavior, all transmit containers that have promise fragments are executed twice.

Once on componentWillMount and again on componentDidMount.

For example if I'm switching between two URI paths that have separate react component (transmit container) handlers. If each of those component have fragments that will fetch for data, they will be fetching twice each time they're rendered.

Some of the fetch queries could be heavy and it's being called twice each time the component is mounted.

Perhaps I'm not using react-transmit as intended?

[kasselTrankos]

@broveloper that is, the fetch is called twice. I dont understand why?, as you told me if the fetch is heavy?.
Im using now universal-redux. Ths have the same philosophy changed promises for redux.
And this repo the fetch is called once.
The philosophy of called twice, where i can read some about to understand. And then got a complete idea of this
thanks

[RickWong]

Is it because of React Router perhaps? I cannot reproduce the behavior using the example in this repository.

[kasselTrankos]

Hi @RickWong,
Yes the problem is when you using react-routing, i think is fundamental for this propouse. Becose the navigation must be dua and the same between server and client.

it behind src/lib/createContainer.js

you call twice, and that is good from server. but in client do twice.
you do in:

• componentWillMount: here you get if the fragments is loaded( by Promises, async)
• Render Again the same
  And what i think happen, is React work ignoring if the promises is done, so when you are under render, here will didnt loaded the promises so your conditional

if (!Container.fragments.hasOwnProperty(fragmentName) ||
                    props.hasOwnProperty(fragmentName) ||
                    state.hasOwnProperty(fragmentName))

say false in both methods,
so if you see i break using a catch only from client (typeof window) to call once
i'll review my example, but only needs to open chrome network console, when you uses react router, and navigate only in client.
tks

[broveloper]

The results are not related to react-router. In the example below, the component will getAllFragments twice.

Example:

import React from 'react';
import ReactDOM from 'react-dom';
import Transmit from 'react-transmit';

class Item extends React.Component {}

const TransmitItem = Transmit.createContainer(Item, {
  fragments: {
    item (variables) {
      return () => Promise.resolve(variables);
    }
  }
});

class App extends React.Component {
  render () {
    return <div/>;
  }
}

const TransmitApp = Transmit.createContainer(App, {
  initialVariables: {},
  fragments: {
    items () {
      console.log('I am called twice.');
      return Promise.all([
        TransmitItem.getFragment('item', {item: 1}),
        TransmitItem.getFragment('item', {item: 2}),
        TransmitItem.getFragment('item', {item: 3}),
      ]);
    },
  }
});

ReactDOM.render(<TransmitApp />, document.getElementById('body'));

[kasselTrankos]

yes, i tell the cause to call twice is because the router, but that not implies that is provocated by router, in the base code there is only one page access, so there is no way to saw the call twice.
so when you make more 1 pages navigation( home|about|contact), you can then see it called twice by client, when your navigation is given by client.

[RickWong]

Thanks for providing the reconstructed example. I identified the problem. If the promises resolve too quickly, then this happens. I'm coding a solution now.

[kasselTrankos]

hey at last, yes that's. React work more quicly than the promises. So this is running twice.
I dont know why you test under ComponentWillMount and Render. Because both run on server and client as the doc of react. If you tell me why is doing that, i'll help you.
tks

[broveloper]

@RickWong You rock bro! 👍 💯

[kasselTrankos]

@RickWong 👍

[RickWong]

@broveloper 👍 @kasselTrankos 👍