Typescript error with queryResult.variables in Cell Success's props after upgrade to Redwood v8

Get Help and Help Others
1

Hi, I have upgraded my redwood project from version 6.3.2 to 8.4.0 and now I have following problem.

I have a cell and in Success component I’m trying to access queryResult.variables. Something like this:

export const Success = ({
  data,
  queryResult
}: CellSuccessProps<TData, TVariables>) => {
  let x = queryResult.variables;
}

And I get following error (on version 8.4.0):

Property 'variables' does not exist on type 'SuspenseCellQueryResult<any, any> | Partial<Omit<QueryOperationResult<TData, Exact<TVariables>>, "error" | ... 1 more ... | "data">>'.
  Property 'variables' does not exist on type 'SuspenseCellQueryResult<any, any>'

And to be clear I don’t think that this is a bug, probably.
I checked the CellSuccessProps type in source code (redwood/packages/web/src/components/cell/cellTypes.ts at c6088688f58f8762102853e45eb59a9dd37d7ded · redwoodjs/redwood · GitHub, rw v8.4.0) and I see that there is union of two types for queryResult, suspense and non suspense variant.

But in rw v 6.3.2 the code works without problem, and typescript doesn’t report any errors. I checked the CellSuccessProps type in source code again (redwood/packages/web/src/components/createCell.tsx at 7e4bf2ec39f96548737c5783aab33c4cdd09d37b · redwoodjs/redwood · GitHub, rw v 6.3.2), and here there aren’t the suspense and non suspense variants. Type here is simpler and variables property can be accessed.

I think the suspense and non suspense variants were introduced in version 8.0.0. In version 7.7.4 they are not there yet (and 7.7.4 is last version before 8.0.0 if I’m correct).

So I want to ask, why are there suspense and non suspense variants in queryResult property of type CellSuccessProps, because they wasn’t always there. And I couldn’t find any information about this change or what suspense means in this context in the documentation or generally on internet.

I think that the change was done in this pr: https://github.com/redwoodjs/redwood/pull/9074.
Specifically in this commit: https://github.com/redwoodjs/redwood/pull/9074/commits/fecacd3331552b9dbf810704d799a2c73339889b#diff-a836a68bbdbaa8ea620dfa522d4af5dd819044c051a1522c2b5bebf36334b9b9R100.
But also in the pr I couldn’t find any information about this.

my enviroment:
yarn: 4.4.0
node: 20.17.0
redwood: 8.4.0

Also I can create some minimal reproducible example if it would be needed.

Thanks for any help, and this is my first time posting here so I’m sorry if I didn’t described it really well.

(Also sorry for the non clickable links, but since I’m new on this forum it tells me that I can add only two links)

2

Hi @qahsgib may I ask the reason for accessing the query variables?

Won’t you already have them as props to the cell component ?

1 Like
3

Hi, thanks, yes you are right I can access them as props. Sorry I didn’t know about that, I’m new to redwood and I’m working on already existing big project.

I can access them as props, but now I have a different problem with types. I have a beforeQuery function for my cell and in the documentation I have read that

If you provide a beforeQuery function, the Cell will automatically change the type of its props to match the first argument of the function.

But this doesn’t seem to be working. And I have specified the type of the first argument in beforeQuery.

Problem 1

I get { [x: string]: {}; } as type when using (calling) my cell (ComponentProps<typeof MyCell>).

Problem 2

Another problem I have is with typing of Success component.

Here is what my code looks like simplified:

type Props = { x: number }

export const beforeQuery = (data: Props) => { ... }

export const Success = ({
  dataReturnedByQuery,
  x, // here I get error
}: CellSuccessProps<MyQuery, MyQueryVariables>) => {
  console.log(x)
  ...
}

In the Success component’s props I get typescript error that x doesn’t exist on type … . And the code runs fine and x is correctly printed only the types don’t seem to be working.

I quickly looked at how the generated types look for a cell. And here redwood/packages/web/src/components/cell/cellTypes.ts at main · redwoodjs/redwood · GitHub I found something weird. On this line is written Parameters<Cell['beforeQuery']>[0] extends unknown which doesn’t make sense to me because every type extends unknown, so this condition is always true. And I think this is the problem why I don’t get correct types for the props when using my cell (problem 1). (I may be wrong about this, I’m not really sure.)

Thank again for help