From fe1884f14971e0b48bf2bf609f6ad057371869e4 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Mon, 31 Jul 2017 11:26:19 +0200 Subject: [PATCH 1/3] move from string ref to callback ref since string refs are legacy https://facebook.github.io/react/docs/refs-and-the-dom.html#legacy-api-string-refs --- src/graphql.tsx | 12 ++++++++++-- src/withApollo.tsx | 12 ++++++++++-- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/graphql.tsx b/src/graphql.tsx index 9d5ad6bd7b..23ca4a1815 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); 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); } } From 3f4c2482611dccc1154be775146a04309cbce34d Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Mon, 31 Jul 2017 12:02:54 +0200 Subject: [PATCH 2/3] update changelog --- Changelog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Changelog.md b/Changelog.md index d5fec48639..52549e0e54 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.8 - Fix: Ensure typescript and flow type definitions match in name From 90b9df68ee17d6405de3371ebbf59afdd6943194 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Mon, 31 Jul 2017 15:13:15 +0200 Subject: [PATCH 3/3] fix tests --- src/graphql.tsx | 2 +- .../client/graphql/shared-operations.test.tsx | 20 ++++++++----------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/graphql.tsx b/src/graphql.tsx index 23ca4a1815..657a3e5a34 100644 --- a/src/graphql.tsx +++ b/src/graphql.tsx @@ -593,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/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 => {