Typehinting in Success Component with Additional Props

Get Help and Help Others
4

I have made the exact same mistake as you. The additional props should not be inside the CellSuccessProps but added in addition to it like so:

// PostPage.tsx
import PostCell from 'src/components/PostCell'

const PostPage = () => {
  return <PostCell pageTitle="..." />
}

export default PostPage

// PostCell.tsx
import type { FindPostById, FindPostByIdVariables } from 'types/graphql'

import type { CellFailureProps, CellSuccessProps } from '@redwoodjs/web'

export const QUERY = gql`
  query FindPostById($id: String!) {
    post: post(
      id: $id
    ) {
      id
      content
    }
  }
`

export const Loading = () => 'Loading post...'

export const Empty = () => 'No post found for this id'

export const Failure = ({ error }: CellFailureProps) => (
  <div className="rw-cell-error">{error?.message}</div>
)

export const Success = ({
  post,
  id,
  pageTitle,
}: CellSuccessProps<FindPostById> &
  FindPostByIdVariables & {
    pageTitle: string
  }) => {
  return (
    <>
      {/* ... */}
    </>
  )
}

Notice how the Success props are defined as CellSuccessProps<FindPostById> & FindPostByIdVariables & { pageTitle: string }:

  • CellSuccessProps<FindPostById> defines the type for post
  • FindPostByIdVariables defines the type(s) for the query input id
  • { pageTitle: string } defines the type(s) for the props you are passing from you parent component/page/whatever

For more info check out this answer Passing props to Cells by @Tobbe