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
.
Source: stackoverflow.com
Related Query
- GraphQL HOC messes with ref to children | React
- <Query> vs graphql Hoc which is best way to hook graphql query with component in react apollo
- Create react HOC with props children
- How to use children with React Stateless Functional Component in TypeScript?
- Exporting React component with multiple HOC wrappers?
- React Warning: flattenChildren(...): Encountered two children with the same key
- Two children with the same key in React
- react ref with focus() doesn't work without setTimeout (my example)
- Typescript with React - use HOC on a generic component class
- React Redux use HOC with connected component
- Using ref with React Hooks in Ant design (antd) Table component with customized filters
- React component with two sets of children
- Forward ref through React Router's withRouter HOC
- How to handle props injected by HOC in React with Typescript?
- Unexpected end of JSON on GraphQL query with React while no issue with GraphiQL
- React Component children typecheck with typescript
- Does still make sense to use HOC with React Hooks?
- React rebuild tree with HOC components (causing input field focus loss)
- Overriding children prop in React with Typescript 3.5+
- "Invalid hook call" when mocking React HOC with Jest
- "Invalid hook call" when mocking React HOC with Jest
- Using react callback ref with forwarded ref
- HoC with React Hooks
- React context consumer was rendered with multiple children error
- Dynamically set GraphQL queries for React components with Apollo Client
- react firebase authentication with apollo graphql
- react with GraphQL Clients
- When the data that Apollo fetched is ready with React & GraphQL
- React Warning: flattenChildren(...): Encountered two children with the same key, `.${index}`
- Is it possible to limit children to specific components using React with TypeScript?
More Query from same tag
- How do I use a custom hook inside of useEffect?
- How do I iterate over a JSON file in react?
- React State Appears but Only first array is accessible
- Next.js Express Custom Server { dev: true } loads forever (empty response) but production { dev: false } works
- Get the ID of a selected Card element and pass it to a modal to select the element
- how to upload an image in node.js application, process it with python and then send the results back
- Customised semantic-ui-react Menu
- Always get undefined when using Yup.array().when() with two arrays
- Managing Multiple Pages for React Application
- React.js - Close and add another row div after X items
- Module not found (Swiperjs in Reactjs)
- How to update/manage data for react-table - useRowState plugin behaviour is unclear
- How to handle states in typescript?
- Error: Form submission canceled because the form is not connected
- echarts-for-react call component on clicking a data point on chart
- Are there any window events triggered if user "pulls the plug" and shuts down their computer?
- React JS How to reset a form
- JS expression not working as part of a string in ReactJS?
- How can I have overflow height setting with the %?
- Webpack/babel not compiling ReactDOM.render
- How can i Animate cell of fixed data table component?
- Why is my React stylesheet media query not working?
- get field value from Formik & Material UI form
- Is there a keyboard shortcut to toggle/show Inspector in React Native?
- How do I change an object attribute based off of a path property array in another object?
- How to wait until meteor subscription data is fully complete?
- make Styles in material ui is not working
- Passing up function calls to handle nested state changes. What am I doing wrong here?
- is there an alternative of withRouter from react-router
- How to Integrate React Epub Reader with next js