Get rid of ssrForceFetchDelay

[darkowic]

ssrForceFetchDelay is a huge workaround for SSR. It is not working if you set too small value especially if you have any asynchronous initialization e.g. react-loadable. I've just spent some time fixing this problem in my project and realized that there is an obvious solution on how to tell apollo-client to not fetch data from API on the first load. The code will explain everything:

client.disableNetworkFetches = true;
ReactDOM.hydrate(
  <ApolloProvider client={client}>
    <MyApp />
  </ApolloProvider>,
  MOUNT_NODE,
  () => {
    // app is hydrated!
    client.disableNetworkFetches = false;
  }
)

React DOM hydrate and render receives as a 3rd argument a callback which works the same as componentDidMount. When the callback is called all components are already rendered.

We can go further and do this in ApolloPrivider

class ApolloProvider extends React.Component {
  constructor(props) {
    super(props);
    props.client.disableNetworkFetches = true;
  }

  componentDidMount() {
    this.props.client.disableNetworkFetches = false;
  }
  ...
}

What do you think?
❤️ this project!

[mikebm]

This is way better than the setTimeout that ssrForceFetchDelay does. I've had to set our apps delay time to 1000. This solution has solved our constant delay tweaking. Thanks for posting it.

[pawsong]

Made a hooks version of this approach:

https://github.com/specup/next-with-apollo-hoc/blob/20cec7e20bfe919c6ccc56cb2b47d479a7c678c6/pages/_app.tsx#L27

[willwill96]

This is far better than the ssrForceFetchDelay option. Thank you @pawsong for hooks approach