Trying to use react hook within cellRenderer is not allowed.

I was trying to use a react-apollo-hook in a custom cellRenderer in order to load data into a modal if the user clicks. However, I get the error message: Invalid hook call: Hooks can only be called inside of the body of a function component.

I believe it is because of the way cellRenderer is being called here.

Is there a different way to accomplish this. Or is using hooks in a cell outside of the scope of this project? Thanks for the help in advance.

For example I was trying to do something like this:

import React from 'react'
import PropTypes from 'prop-types'
import { useLazyQuery } from '@apollo/react-hooks'
import { get } from 'lodash'

import { QUERY } from './queries'

export const InterpretationsCell = ({ cellData,  }) => {

  const [loadDetails, { loading, data }] = useLazyQuery(QUERY)

  ...do something
  
  return <p>{cellData}</p>
}

InterpretationsCell.propTypes = {
  column: PropTypes.shape({
    variantType: PropTypes.string.isRequired,
    idKey: PropTypes.string.isRequired,
  }).isRequired,
}

export default InterpretationsCell

[nihgwu]

@genomics-geek fixed in v1.7.2

[nihgwu]

@genomics-geek I’d say that would be problematic if you use local state in cell renderer, as the component will be unmount when it’s out of viewport by scrolling, and all the local state will be lost, from your snippet, I think you can use onRowsRendered to perform lazy data loading, and that’s what we did internally, by that way you can load and cache on demand