Skip to content

Commit

Permalink
Use unstable_read() instead of ReactRelayContext.Consumer
Browse files Browse the repository at this point in the history 
Reviewed By: jstejada

Differential Revision: D9972097

fbshipit-source-id: a04c576fa93085e172373ee3ca8ed35be8299fc3
  • Loading branch information
@facebook-github-bot
Avi Johnson authored and facebook-github-bot committed Sep 25, 2018
1 parent eec2ada commit 98e866f
Show file tree
Hide file tree
Showing 8 changed files with 70 additions and 74 deletions.
24 changes: 13 additions & 11 deletions packages/react-relay/classic/container/RelayContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1066,18 +1066,20 @@ function create(
}

function forwardRef(props, ref) {
// $FlowFixMe unstable_read is not yet typed
const context = ReactRelayContext.unstable_read();
invariant(
context,
`${containerName} tried to render a context that was ` +
`not valid this means that ${containerName} was rendered outside of a ` +
'query renderer.',
);
return (
<ReactRelayContext.Consumer>
{context => {
return (
<ContainerConstructor
{...props}
__relayContext={context}
ref={props.ref || ref}
/>
);
}}
</ReactRelayContext.Consumer>
<ContainerConstructor
{...props}
__relayContext={context}
ref={props.ref || ref}
/>
);
}
// $FlowExpectedError See https://github.com/facebook/flow/issues/6103
Expand Down
12 changes: 4 additions & 8 deletions packages/react-relay/classic/container/__tests__/RelayReadyStateRenderer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -537,14 +537,10 @@ describe('RelayReadyStateRenderer', () => {
describe('context', () => {
it('sets environment and query config on the React context', () => {
function TestComponent({onRenderContext}) {
return (
<ReactRelayContext.Consumer>
{context => {
onRenderContext(context);
return null;
}}
</ReactRelayContext.Consumer>
);
// $FlowFixMe unstable_read is not yet typed
const context = ReactRelayContext.unstable_read();
onRenderContext(context);
return null;
}

const onRenderContext = jest.fn();
Expand Down
24 changes: 13 additions & 11 deletions packages/react-relay/compat/ReactRelayCompatContainerBuilder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,18 +141,20 @@ function buildCompatContainer(
}

function forwardRef(props, ref) {
// $FlowFixMe unstable_read is not yet typed
const context = ReactRelayContext.unstable_read();
invariant(
context,
`${containerName} tried to render a context that was ` +
`not valid this means that ${containerName} was rendered outside of a ` +
'query renderer.',
);
return (
<ReactRelayContext.Consumer>
{context => {
return (
<ContainerConstructor
{...props}
__relayContext={context}
componentRef={props.componentRef || ref}
/>
);
}}
</ReactRelayContext.Consumer>
<ContainerConstructor
{...props}
__relayContext={context}
componentRef={props.componentRef || ref}
/>
);
}
forwardRef.displayName = containerName;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-relay/modern/__tests__/ReactRelayFragmentContainer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ describe('ReactRelayFragmentContainer', () => {
environment: env,
variables: vars,
};
this.forceUpdate();
this.setProps({});
}
render() {
let child = React.Children.only(this.props.children);
Expand Down
17 changes: 11 additions & 6 deletions packages/react-relay/modern/__tests__/ReactRelayPaginationContainer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,20 +45,25 @@ describe('ReactRelayPaginationContainer', () => {
constructor(props) {
super(props);

this.__relayContext = {
environment: props.environment,
variables: props.variables,
};

this.state = {
props: null,
__relayContext: {
environment: props.environment,
variables: props.variables,
},
};
}

setProps(props) {
this.setState({props});
}
setContext(env, vars) {
this.setState({__relayContext: {environment: env, variables: vars}});
this.__relayContext = {
environment: env,
variables: vars,
};
this.setProps({});
}

render() {
Expand All @@ -68,7 +73,7 @@ describe('ReactRelayPaginationContainer', () => {
}

return (
<ReactRelayContext.Provider value={this.state.__relayContext}>
<ReactRelayContext.Provider value={this.__relayContext}>
{child}
</ReactRelayContext.Provider>
);
Expand Down
19 changes: 6 additions & 13 deletions packages/react-relay/modern/__tests__/ReactRelayQueryRenderer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -459,22 +459,15 @@ describe('ReactRelayQueryRenderer', () => {
});

describe('context', () => {
let ContextGetter;
let relayContext;

beforeEach(() => {
ContextGetter = class extends React.Component {
render() {
return (
<ReactRelayContext.Consumer>
{context => {
relayContext = context;
return <div />;
}}
</ReactRelayContext.Consumer>
);
}
};
function ContextGetter() {
// $FlowFixMe unstable_read is not yet typed
relayContext = ReactRelayContext.unstable_read();
return null;
}

render = jest.fn(() => <ContextGetter />);
});

Expand Down
18 changes: 6 additions & 12 deletions packages/react-relay/modern/__tests__/ReactRelayRefetchContainer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ describe('ReactRelayRefetchContainer', () => {
let refetch;
let render;
let variables;
let ContextGetter;
let relayContext;

class ContextSetter extends React.Component {
Expand Down Expand Up @@ -63,7 +62,7 @@ describe('ReactRelayRefetchContainer', () => {
environment: env,
variables: vars,
};
this.forceUpdate();
this.setProps({});
}
render() {
let child = React.Children.only(this.props.children);
Expand Down Expand Up @@ -101,16 +100,11 @@ describe('ReactRelayRefetchContainer', () => {
`,
));

ContextGetter = () => {
return (
<ReactRelayContext.Consumer>
{context => {
relayContext = context;
return <div />;
}}
</ReactRelayContext.Consumer>
);
};
function ContextGetter() {
// $FlowFixMe unstable_read is not yet typed
relayContext = ReactRelayContext.unstable_read();
return null;
}

render = jest.fn(props => {
refetch = props.relay.refetch;
Expand Down
28 changes: 16 additions & 12 deletions packages/react-relay/modern/buildReactRelayContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@
'use strict';

const React = require('React');
const ReactRelayContext = require('./ReactRelayContext');
const ReactRelayContext = require('../modern/ReactRelayContext');

const assertFragmentMap = require('./assertFragmentMap');
const invariant = require('invariant');
const mapObject = require('mapObject');

const {
Expand Down Expand Up @@ -75,18 +76,21 @@ function buildReactRelayContainer<TBase: React$ComponentType<*>>(
}

function forwardRef(props, ref) {
// $FlowFixMe unstable_read is not yet typed
const context = ReactRelayContext.unstable_read();
invariant(
context,
`${containerName} tried to render a context that was ` +
`not valid this means that ${containerName} was rendered outside of a ` +
'query renderer.',
);

return (
<ReactRelayContext.Consumer>
{context => {
return (
<ContainerConstructor
{...props}
__relayContext={context}
componentRef={props.componentRef || ref}
/>
);
}}
</ReactRelayContext.Consumer>
<ContainerConstructor
{...props}
__relayContext={context}
componentRef={props.componentRef || ref}
/>
);
}
forwardRef.displayName = containerName;
Expand Down

4 comments on commit 98e866f

@TrySound
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unstable_read doesn't work with SSR yet. Do you think using it is a good idea?

@johntran
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@TrySound Source?

@TrySound
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@johntran https://codesandbox.io/s/l5j35928xl

@jstejada
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for bringing this up, let's chat in #2544

Please sign in to comment.