Is it possible to consume external data inside Cell?

[taschetto]

Hi! I'm consuming a JSON-API endpoint. It returns two attributes: data and included (JSON-API Compound Document pattern) that holds related data. Check the following example:

{
   "data":[
      {
         "id":"1",
         "type":"company",
         "attributes":{
            "name":"COMPANY",
            "state_id":"10"
         }
      },
      {
         "id":"2",
         "type":"company",
         "attributes":{
            "name":"ANOTHER COMPANY",
            "state_id":"12"
         }
      }
   ],
   "included":[
      {
         "id":"10",
         "type":"state",
         "attributes":{
            "abbreviation":"NY",
            "name":"New York"
         }
      },
      {
         "id":"12",
         "type":"state",
         "attributes":{
            "abbreviation":"CA",
            "name":"California"
         }
      }
   ]
}

I want to create a table in the following layout:

Company Name	State Name
COMPANY	New York
ANOTHER COMPANY	California

I'm trying using the following code to define my columns:

  const { status, data, error } = useCompanies()
  const { data: companies = [], included = [] } = data ?? {}

  const find = (collection = [], desiredType = '', desiredId = '') =>
    collection.find(({ type, id }) => type === desiredType && id === desiredId)

  const columns = React.useMemo(
    () => [
      {
        Header: 'Company Name',
        accessor: 'attributes.name'
      },
      {
        Header: 'State Name',
        accessor: 'attributes.state_id',
        Cell: ({ value }) => {
          const state = find(included, 'state', value)
          return state?.name ?? ''
        },
      },
    ],
    [included]
  )

And I got the following error:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

checkForNestedUpdates
node_modules/react-dom/cjs/react-dom.development.js:23093
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js:21164
dispatchAction
node_modules/react-dom/cjs/react-dom.development.js:15660
▲ 3 stack frames were expanded.
(anonymous function)
src/hooks/useColumnVisibility.js:207
  204 | 
  205 | useMountedLayoutEffect(() => {
  206 |   if (getAutoResetHiddenColumns()) {
> 207 |     dispatch({ type: actions.resetHiddenColumns })
      | ^  208 |   }
  209 | }, [dispatch, columns])
  210 | 
View compiled
(anonymous function)
src/publicUtils.js:153
  150 | 
  151 | safeUseLayoutEffect(() => {
  152 |   if (mountedRef.current) {
> 153 |     fn()
      | ^  154 |   }
  155 |   mountedRef.current = true
  156 |   // eslint-disable-next-line

Is there a way to consume external data inside Cell or it is not recommended? Does anyone know a way to achieve my goals using my raw data without the need to iterate and merge both arrays?

Thanks in advance. :-)

[rodbs]

@taschetto
Have you figured it out?
I'm also interesting in consuming external data, in my case in embedding mp3 urls to be play when clicking on the cell

[taschetto]

Hey, @rodbs

unfortunately no. I had to normalize my object in order to have all needed data in a single "row". I believe this is the right way to do it since the Cell render becomes a pure function.

[rodbs]

@taschetto thanks for your feedback