Typehinting in Success Component with Additional Props

Get Help and Help Others
1

I was trying to pass some additional props to the Success Component.
This prop is not used in the query but just used in the Success.
I tried extending the auto generated type to add the new property but
I am getting some TS errors.

Now I might be doing it incorrectly, as for one thing is that I am trying to extend an autogenerated type.

What is the correct way to add an additional prop and add it to the types so that I don’t get TS Errors.

image
image1728×989 158 KB

1 Like
2

try use the command yarn redwood generate types

3

Yeah I tried that, and it seems like the type generator doesn’t take the types from the type changes I added in the Cell and instead it takes it from the auto generated types.
For example here my new Type is variablesWithTitle, but if I go to
.redwood/types/mirror/web/src/components/PriceChangeCell/index.d.ts.
I will see
type CellInputs = CellProps<SuccessType, topPriceChanges, typeof Cell, topPriceChangesVariables>

there is no mention of variablesWithTitle in that file

1 Like
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

5

Great! What you have suggested works.

Since the code generated by rw cli creates a return type like CellSuccessProps< topPriceChanges, topPriceChangesVariables>, I was thinking that the second parameter would be for the variables and I would be good if I just update the second parameter.