Help! Seeking stories Of Cells and Typescript

Get Help and Help Others
1

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

      <TheRegistrationCell
        kind={accountType}
        name={description.name}
        phone={description.phone}
        email={description.email}
        address={description.address}
        exfiltrate={handleRegister} />

Screen Shot 2021-05-12 at 7.45.31 AM
Screen Shot 2021-05-12 at 7.45.31 AM1006×153 36.8 KB

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…

2

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.

Damn!

3

ok…

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…

      <TheTwoFAQueryCell
        phone={givenPhone}
        exfiltrate={doSetConfirmation} />
4

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…

5

yet closer…



  const TwoFAQueryCell = createCell(TheTwoFAQueryCell);

  return (
    <>

      <TwoFAQueryCell
        phone="8067095916"
        exfiltrate={doSetConfirmation} />

still not working exactly right tho’

error:

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

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.