[Bug]: createCell doesn't typecheck with strict mode

[jmackie]

What's not working?

Related to #5491

I don't think the typing of createCell is quite right...

Attempting to use createCell "by hand" in a TypeScript file (as we do in a few places at @project-nous) with strict type-checking enabled throws an error in v3.

How do we reproduce the bug?

1. Generate a new redwood (v3) project with

yarn create redwood-app ./redwoodblog

2. Generate a new cell

yarn redwood generate cell Example

3. Mock out the GraphQL schema types

diff --git a/web/src/components/ExampleCell/ExampleCell.tsx b/web/src/components/ExampleCell/ExampleCell.tsx
index 4125e09..618f625 100644
--- a/web/src/components/ExampleCell/ExampleCell.tsx
+++ b/web/src/components/ExampleCell/ExampleCell.tsx
@@ -1,6 +1,9 @@
-import type { FindExampleQuery, FindExampleQueryVariables } from 'types/graphql'
+//import type { FindExampleQuery, FindExampleQueryVariables } from 'types/graphql'
 import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
 
+type FindExampleQuery = { example: { id: number } }
+type FindExampleQueryVariables = {}
+
 export const QUERY = gql`
   query FindExampleQuery($id: Int!) {
     example: example(id: $id) {

4. Add createCell stuff as per babel-plugin-redwood-cell

diff --git a/web/src/components/ExampleCell/ExampleCell.tsx b/web/src/components/ExampleCell/ExampleCell.tsx
index 618f625..165d753 100644
--- a/web/src/components/ExampleCell/ExampleCell.tsx
+++ b/web/src/components/ExampleCell/ExampleCell.tsx
@@ -1,5 +1,5 @@
 //import type { FindExampleQuery, FindExampleQueryVariables } from 'types/graphql'
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+import { CellSuccessProps, CellFailureProps, createCell } from '@redwoodjs/web'
 
 type FindExampleQuery = { example: { id: string } }
 type FindExampleQueryVariables = {}
@@ -27,3 +27,5 @@ export const Success = ({
 }: CellSuccessProps<FindExampleQuery, FindExampleQueryVariables>) => {
   return <div>{JSON.stringify(example)}</div>
 }
+export default createCell({ QUERY, Loading, Success, Failure, Empty })

5. Turn on strict type checking

diff --git a/web/tsconfig.json b/web/tsconfig.json
index fb9c789..1ccf381 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "strict": true,
     "noEmit": true,
     "allowJs": true,
     "esModuleInterop": true,

6. Type check

yarn redwood type-check

7. See some grizzly type errors

What's your environment? (If it applies)

No response

Are you interested in working on this?

• I'm interested in working on this

[Tobbe]

This is the error I'm getting. Same one you're seeing?

[Tobbe]

If I first make sure the Example model exists and sdl is generated I get this error

Same error as shown by yarn rw type-check

[Tobbe]

If I change the Success component declaration to look like this it works

export const Success = ({ example }: Partial<FindExampleQuery>) => {

Not exactly sure why yet, but it's a workaround for now