Support getDerivedStateFromProps

[amannn]

In contrast to componentWillReceiveProps, the new getDerivedStateFromProps lifecycle method is also called before the first render.

It looks like you have some kind of script set up that fixes indentation before a commit. I therefore made two separate commits, so it's easier to differentiate the actual change from the diff.

Checklist:

• If this PR is a new feature, please reference an issue where a consensus about the design was reached (not necessary for small changes)
• Make sure all of the significant new logic is covered by tests
• If this was a change that affects the external API used in GitHunt-React, update GitHunt-React and post a link to the PR in the discussion.

[mike-marcacci]

This looks good to go! I appreciated the separate commit for indentation.

[amannn]

@mike-marcacci Thanks for the review! Can this be merged then?

[trojanowski]

@amannn I think one change is required - if getDerivedStateFromProps is defined then componentWillMount shouldn't be called. Please look at https://github.com/facebook/react/blob/a2cc3c38e214c16ff6805312d4353c1faab9ff95/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js#L660 and https://codesandbox.io/s/x93872vmyw.

[amannn]

@trojanowski Good point! I've updated the PR accordingly.

[marnusw]

@hwillson this is a follow-up issue to the recently merged #1978 which will make SSR fully compliant with React 16.3 (as far as I can tell). Is there any chance this PR could be fast-tracked for release in the near future?

[hwillson]

Looks great @amannn - thanks very much!

[hwillson]

@marnusw Merging it now, which means we should be able to get this released tomorrow.

[marnusw]

Thank you @hwillson! We appreciate your time and that you jumped on this so quickly.

And thanks @amannn for the fix.

[hwillson]

This is now available in react-apollo 2.1.7 - thanks all!

[zsolt-dev]

Thank for this bug fix... Was waiting for this for some time.

But now I get "loading" on SSR everywhere. Each server side rendered page return loading in the source code and empty apollo state. Data is loaded fine after page loads in the browser.

any ideas how to fix?

[tab00]

Even with the latest react-apollo (2.1.11) I still get the error (with <React.StrictMode>):

Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    in div (created by App)
    in div (created by App)
    in div (created by App)
    in ApolloProvider (created by App)
    in App

componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: Query

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

[onpaws]

Having the same experience as @tab00.
Do I need to opt-in somehow?

import React, { unstable_AsyncMode as AsyncMode } from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

const GET_SHIPS = gql`
query {
	allStarships {
    id
    name
    passengers
    costInCredits
    consumables
    createdAt
  }
}
`

export const Ships = () =>
  <div>
    <AsyncMode>
      <Query query={GET_SHIPS} asyncMode>
        {({ loading, error, data }) => {
          if (loading) return <h1>Loading...</h1>;
          if (error) return <h1>Error :(</h1>;

          return data.allStarships.map(ship =>
            <Ship key={ship.id} {...ship} />
          );
        }}
      </Query>
    </AsyncMode>
  </div>


const Ship = (props) =>
  <div>
    <h4>{props.name}</h4>
    <p>Passengers: {props.passengers}</p>
    <p>Cost: {props.costInCredits}</p>
    <p>Created: {props.createdAt}</p>
  </div>

React v16.5.2
macOS 10.14