Add full typing OOTB for all cell components

redwoodjs · Dec 8, 2024 · 76a2c13 · 76a2c13
1 parent 455bae8
commit 76a2c13
Showing 1 changed file with 14 additions and 9 deletions.
diff --git a/packages/cli/src/commands/generate/cell/templates/cell.tsx.template b/packages/cli/src/commands/generate/cell/templates/cell.tsx.template
@@ -1,8 +1,9 @@
 import type { ${operationName}, ${operationName}Variables } from 'types/graphql'
 
 import type {
-  CellSuccessProps,
   CellFailureProps,
+  CellLoadingProps,
+  CellSuccessProps,
   TypedDocumentNode,
 } from '@redwoodjs/web'
 
@@ -17,18 +18,22 @@ export const QUERY: TypedDocumentNode<
   }
 `
 
-export const Loading = () => <div>Loading...</div>
+export const Loading: React.FC<
+  CellLoadingProps<<${operationName}Variables>
+> = () => <div>Loading...</div>
 
-export const Empty = () => <div>Empty</div>
+export const Empty: React.FC<
+  CellSuccessProps<${operationName}Variables>
+> = () => <div>Empty</div>
 
-export const Failure = ({
-  error,
-}: CellFailureProps<${operationName}Variables>) => (
+export const Failure: React.FC<
+  CellFailureProps<${operationName}Variables>
+> = ({ error }) => (
   <div style={{ color: 'red' }}>Error: {error?.message}</div>
 )
 
-export const Success = ({
-  ${camelName},
-}: CellSuccessProps<${operationName}, ${operationName}Variables>) => {
+export const Success: React.FC<
+  CellSuccessProps<${operationName}, ${operationName}Variables>
+> = ({ ${camelName} }) => {
   return <div>{JSON.stringify(${camelName})}</div>
 }