move from string ref to callback ref

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

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,

src/withApollo.tsx

@@ -51,9 +51,13 @@ export function withApollo<TProps, TResult>(
     // 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<TProps, TResult>(
           `{ 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);
     }
   }

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 => {