Help! Seeking stories Of Cells and Typescript

Thanks for v0.31- It’s looking really nice !!

I’m afraid I don’t understand how to use Cells in a Typescript RW app

I include them as any other component (I don’t know why I have to include the component file inside the component folder – I’m sure there’s a better way)

import * as TestCell from 'src/components/TestCell/TestCell'

and then I include them in the render

<TestCell />

and I get an error: JSX element type 'TestCell' does not have any construct or call signatures.

I’m getting to really like cells, (and exfiltration of data from them is somehow easier now, I only have to wrap a setTimeout around any setState called from their Success method now) but I fear I still am using them somehow wrongly…

With more complex cells that need inputs I get errors that complain about the parameters

        exfiltrate={handleRegister} />

if I change the import to a require it’s quiets all the warning/errors

const TestCell = require('src/components/TestCell/TestCell')

And the runtime error is then: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

I feel a little lost here…

Ok, so I noticed (at last!) that the new cells (typescript cells) now must return JSX as opposed to the strings they used to return…

Still getting error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.



so reading source I see that withCellHOC.tsx is gone, replaced with createCell.tsx ??

which needs to wrap Cells directly ?

this fails: <Test /> whereas this succeeds: {createCell(TestCell)}

But I can’t figure out use this for my complex cells that need parameters…

        exfiltrate={doSetConfirmation} />

so I can use createCell & a custom berforeQuery – but the page then just re-renders each time the Cell state changes…

  const beforeQuery = (props:any) => {
    return { variables: { ...props, phone, exfiltrate  } }

  const TwoFACell = createCell({ ...TheTwoFAQueryCell, beforeQuery })

return (
  <TwoFACell />

What happened??

I’m glad we’re headed this way: Statically typing cells? · Issue #2205 · redwoodjs/redwood · GitHub

But it feels like we missed a line somewhere…

yet closer…

  const TwoFAQueryCell = createCell(TheTwoFAQueryCell);

  return (

        exfiltrate={doSetConfirmation} />

still not working exactly right tho’


Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

from createCell.tsx, does this mean the mentioned babel plugin is not configured?

 * Is a higher-order-component that executes a GraphQL query and automatically
 * manages the lifecycle of that query. If you export named parameters that match
 * the required params of `createCell` it will be automatically wrapped in this
 * HOC via a babel-plugin.