diff --git a/Changelog.md b/Changelog.md index 310f34f48b..95f0e1a7ea 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,6 +1,7 @@ # Change log ### vNext +- Replace string refs with callback refs [#908](https://github.com/apollographql/react-apollo/pull/908) ### 1.4.9 - Fix: fix matching types with exports for flow and ts diff --git a/src/graphql.tsx b/src/graphql.tsx index 9d5ad6bd7b..657a3e5a34 100644 --- a/src/graphql.tsx +++ b/src/graphql.tsx @@ -137,11 +137,15 @@ export default function graphql< // the element to render private renderedElement: any; + // wrapped instance + private wrappedInstance: any; + constructor(props, context) { super(props, context); this.version = version; this.type = operation.type; this.dataForChildViaMutation = this.dataForChildViaMutation.bind(this); + this.setWrappedInstance = this.setWrappedInstance.bind(this); } componentWillMount() { @@ -481,7 +485,11 @@ export default function graphql< `{ withRef: true } in the options`, ); - return (this.refs as any).wrappedInstance; + return this.wrappedInstance; + } + + setWrappedInstance(ref) { + this.wrappedInstance = ref; } dataForChildViaMutation(mutationOpts: MutationOpts) { @@ -563,7 +571,7 @@ export default function graphql< if (operationOptions.withRef) { return createElement( WrappedComponent, - assign({}, this.props, { ref: 'wrappedInstance' }), + assign({}, this.props, { ref: this.setWrappedInstance }), ); } return createElement(WrappedComponent, this.props); @@ -585,7 +593,7 @@ export default function graphql< const mergedPropsAndData = assign({}, props, clientProps); if (operationOptions.withRef) - mergedPropsAndData.ref = 'wrappedInstance'; + mergedPropsAndData.ref = this.setWrappedInstance; this.renderedElement = createElement( WrappedComponent, mergedPropsAndData, diff --git a/src/withApollo.tsx b/src/withApollo.tsx index 694aae6139..33f1d56cde 100644 --- a/src/withApollo.tsx +++ b/src/withApollo.tsx @@ -51,9 +51,13 @@ export function withApollo( // data storage private client: ApolloClient; // apollo client + // wrapped instance + private wrappedInstance: any; + constructor(props, context) { super(props, context); this.client = context.client; + this.setWrappedInstance = this.setWrappedInstance.bind(this); invariant( !!this.client, @@ -70,13 +74,17 @@ export function withApollo( `{ withRef: true } in the options`, ); - return (this.refs as any).wrappedInstance; + return this.wrappedInstance; + } + + setWrappedInstance(ref) { + this.wrappedInstance = ref; } render() { const props = assign({}, this.props); props.client = this.client; - if (operationOptions.withRef) props.ref = 'wrappedInstance'; + if (operationOptions.withRef) props.ref = this.setWrappedInstance; return createElement(WrappedComponent, props); } } diff --git a/test/react-web/client/graphql/shared-operations.test.tsx b/test/react-web/client/graphql/shared-operations.test.tsx index 448ab197eb..0108f6c586 100644 --- a/test/react-web/client/graphql/shared-operations.test.tsx +++ b/test/react-web/client/graphql/shared-operations.test.tsx @@ -64,9 +64,7 @@ describe('shared operations', () => { expect((decorated as any).getWrappedInstance().someMethod()).toEqual( testData, ); - expect((decorated as any).refs.wrappedInstance.someMethod()).toEqual( - testData, - ); + expect((decorated as any).wrappedInstance.someMethod()).toEqual(testData); const DecoratedWithSkip = withApollo(Container, { withRef: true, @@ -88,9 +86,9 @@ describe('shared operations', () => { expect( (decoratedWithSkip as any).getWrappedInstance().someMethod(), ).toEqual(testData); - expect( - (decoratedWithSkip as any).refs.wrappedInstance.someMethod(), - ).toEqual(testData); + expect((decoratedWithSkip as any).wrappedInstance.someMethod()).toEqual( + testData, + ); }); }); @@ -301,9 +299,7 @@ describe('shared operations', () => { expect((decorated as any).getWrappedInstance().someMethod()).toEqual( testData, ); - expect((decorated as any).refs.wrappedInstance.someMethod()).toEqual( - testData, - ); + expect((decorated as any).wrappedInstance.someMethod()).toEqual(testData); const DecoratedWithSkip = graphql(query, { withRef: true, skip: true })( Container, @@ -324,9 +320,9 @@ describe('shared operations', () => { expect( (decoratedWithSkip as any).getWrappedInstance().someMethod(), ).toEqual(testData); - expect( - (decoratedWithSkip as any).refs.wrappedInstance.someMethod(), - ).toEqual(testData); + expect((decoratedWithSkip as any).wrappedInstance.someMethod()).toEqual( + testData, + ); }); it('allows options to take an object', done => {