Typehinting in Success Component with Additional Props

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.

1 Like

try use the command yarn redwood generate types

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
I will see
type CellInputs = CellProps<SuccessType, topPriceChanges, typeof Cell, topPriceChangesVariables>

there is no mention of variablesWithTitle in that file

1 Like

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
    ) {

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 = ({
}: 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

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.