[My] Solution: Typescript & Cells

Get Help and Help Others
1

Has anyone generated a typescript project and used a Cell successfully?

I’d love a peek…

ref: Help! Seeking stories Of Cells and Typescript - #6 by ajoslin103

2

Hello Joslin! (Let me know if that isn’t what you prefer lol)

So there is an open issue which blocked me from making a TypeScript Cell using createCell (or whatever the new name is), which I assume is how they’ll be built in TS.

If your Cell’s data-fetching doesn’t make use of Redwood’s GraphQL standard (so it isn’t an Apollo query), you can implement it in TypeScript the component which provides this custom logic as the file’s default, as you would a custom Redwood component. I have an example here, where a Cell is performing login and handles displaying the appropriate sub-component (Success, Failure, …) on its own.

A work-around to the “Missing declarations for module …” or the similar error in your IDE is to make a .d.ts file alongside your Cell’s implementation. I also have an example of that, on the same repository.

Hope it helps :slight_smile:

1 Like
3

Hi @ajoslin103 you can also follow the progress on “Typscripting” GQL here: GraphQL Codegen for generating gql types by dac09 · Pull Request #2485 · redwoodjs/redwood · GitHub

Cells and GQL are some of the remaining tasks to have Redwood support TS.

4

gotcha

I might have to restart this project in JS

thanks

5

@ajoslin103 you could just add @ts-expect-error into Cells for now instead of completely restarting a new project. Your Redwood typescript project doesn’t need to be 100% typescript for it to compile either, having some files as JS would be fine too.

That being said, full Cell typescript support is definitely coming next release.

1 Like
6

I will try that. Thanks, I didn’t know about that one.

I was avoiding coming back to this project even tho’ the deadline’s looming 'cause I didn’t want to go back to JS

7

Thanks - I’ll try some of these

8

Ok, this worked…

------------------ the cell: ------------------

export const QUERY = gql`
  query TheTwoFAQueryCell($phone: String!) {
    twoFaSents(phone: $phone) {
      securityCode
      error
    }
  }
`
export const Empty = () => <span></span>
export const Loading = ({ variables }) => <span>Texting: {variables.phone}</span>
export const Failure = ({ error }) => (
  <div style={{ color: 'red' }}>Error: {error.message}</div>
)
export const Success = ({ twoFaSents, variables }) => {
  const firstResult = twoFaSents[0]
  variables.exfiltrate(firstResult.securityCode)
  return variables.doneMsg ? <span>{variables.doneMsg}</span> : null
}
export const beforeQuery = (props:any) => {
  return { variables: props, fetchPolicy: 'cache-and-network', nextFetchPolicy: 'cache-first' }
}

------------------ the cell’s types: ------------------

export interface TwoFAQueryCellCompleteData {
  phone: string
  exfiltrate: Function
}
export interface TwoFAQueryCellProps {
  onComplete?: (result: TwoFAQueryCellCompleteData) => void
  onError?: (error: Error) => void
  phone: string
  exfiltrate: Function
}
declare const TheTwoFAQueryCell: React.VFC<TwoFAQueryCellProps>
export default TheTwoFAQueryCell

------------------ the import: ------------------

// @ts-expect-error
import TheTwoFAQueryCell from 'src/components/TheTwoFAQueryCell/TheTwoFAQueryCell'

------------------ the usage: ------------------

      <TheTwoFAQueryCell
        phone="7047095166"
        exfiltrate={doSetConfirmation}
      />

Kudos to @danny and @realStandal

2 Likes
9

This worked perfectly. I do look forward to full support for TypeScript though :smile:

10

as do i !!

note: sometimes react complains when my exfiltrateFn updates some other components state (hey, it could happen : ) in those times I wrap the guts of that save in a setTimeoutFn

11

Hey All,

Redwood v0.33 now ships with almost complete TypeScript support. Please let us know of your dev experience after you upgrade, and remember to follow the release notes for manual codemods to get it all working!

More info here: [Community help wanted!] TypeScript Feedback v0.33.x+

1 Like