score:0

the hoc wrapps your component into another component. you can see this in the react devtools. you will see that the component renders a component around your wrapped component. something like this

<apollo(childcomponent)>
  <childcomponent />
</apollo>

your ref then points to the apollo(childcomponen) element instance.

what you are doing here looks like an antipattern to me. in react we usually don't call functions on rendered elements (except sometimes dom elements). the idea is rather that children call functions of their parents by receiving them as properties. the best thing in your case is to get rid of the reference and move your state and actions up the component chain. alternatively you can use the new render prop style in react-apollo.

score:0

there was a contribution to the apollo repository to address this issue... https://github.com/apollographql/react-apollo/pull/410

wrapping your component export like this withapollo(component, { withref: true }) will expose your child methods. accessible using ref.current.wrappedinstance.


Related Query

More Query from same tag