fix: avoid naming conflict with client prop (#7024)

* fix: avoid naming conflict with `client` prop

* fix: disable lint error for prefer-const

* refactor: group variables under queryResult

* fix: add type safety for handling errorCode

* refactor: deconstruct props directly

* Codemod for cell parameter adjustments

---------

Co-authored-by: Josh-Walker-GM <[email protected]>

packages/codemods/src/codemods/v5.x.x/cellQueryResult/README.md

@@ -0,0 +1,22 @@
+# Cell QueryResult
+
+RedwoodJS v5 no longer spreads the additional properties returned by a query result when passing properties into a cell.
+
+Prior to v5, Redwood would spread properties such as `client` or `refetch` which were returned by the query result for use within the first parameter of a cell. See https://www.apollographql.com/docs/react/data/queries/#result for the properties returned by Apollo. This would in some cases restrict the choice of naming the query result as the data would be overridden by these additional query result properties. In v5 these additional properties (all but `loading`, `error` and `data`) are passed via a `queryResult` property.
+
+Prior to v5 access to the additional query result properties was possible like so:
+```ts
+export const Success = ({ model, client: apolloClient, refetch }: CellSuccessProps<FindModelById>) => {
+  // Access to apolloClient or refetch is possible
+  return <Model model={model} />
+}
+```
+
+This codemod removes any occurrence of these previously spread variables from the parameters and instead provides them via the destructuring of `queryResult`. This results in:
+
+```ts
+export const Success = ({ model, queryResult: {client: apolloClient, refetch} }: CellSuccessProps<FindModelById>) => {
+  // Access to apolloClient or refetch is still possible via the nested destructuring
+  return <Model model={model} />
+}
+```

packages/codemods/src/codemods/v5.x.x/cellQueryResult/__testfixtures__/client.input.tsx

@@ -0,0 +1,33 @@
+import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import Author from 'src/components/Author'
+
+export const QUERY = gql`
+  query FindAuthorQuery($id: Int!) {
+    author: user(id: $id) {
+      email
+      fullName
+    }
+  }
+`
+
+export const Loading = () => <span>Loading...</span>
+
+export const Empty = () => <span>Empty</span>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindAuthorQueryVariables>) => (
+  <span style={{ color: 'red' }}>Error: {error?.message}</span>
+)
+
+export const Success = ({
+  author,
+  client
+}: CellSuccessProps<FindAuthorQuery, FindAuthorQueryVariables>) => (
+  <span className="author-cell">
+    <Author author={author} client={client}/>
+  </span>
+)

packages/codemods/src/codemods/v5.x.x/cellQueryResult/__testfixtures__/client.output.tsx

@@ -0,0 +1,34 @@
+import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import Author from 'src/components/Author'
+
+export const QUERY = gql`
+  query FindAuthorQuery($id: Int!) {
+    author: user(id: $id) {
+      email
+      fullName
+    }
+  }
+`
+
+export const Loading = () => <span>Loading...</span>
+
+export const Empty = () => <span>Empty</span>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindAuthorQueryVariables>) => (
+  <span style={{ color: 'red' }}>Error: {error?.message}</span>
+)
+
+export const Success = ({
+  author,
+
+  queryResult: { client }
+}: CellSuccessProps<FindAuthorQuery, FindAuthorQueryVariables>) => (
+  <span className="author-cell">
+    <Author author={author} client={client} />
+  </span>
+)

packages/codemods/src/codemods/v5.x.x/cellQueryResult/__testfixtures__/default.input.ts

@@ -0,0 +1,32 @@
+import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import Author from 'src/components/Author'
+
+export const QUERY = gql`
+  query FindAuthorQuery($id: Int!) {
+    author: user(id: $id) {
+      email
+      fullName
+    }
+  }
+`
+
+export const Loading = () => <span>Loading...</span>
+
+export const Empty = () => <span>Empty</span>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindAuthorQueryVariables>) => (
+  <span style={{ color: 'red' }}>Error: {error?.message}</span>
+)
+
+export const Success = ({
+  author,
+}: CellSuccessProps<FindAuthorQuery, FindAuthorQueryVariables>) => (
+  <span className="author-cell">
+    <Author author={author} />
+  </span>
+)

packages/codemods/src/codemods/v5.x.x/cellQueryResult/__testfixtures__/default.output.ts

@@ -0,0 +1,32 @@
+import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import Author from 'src/components/Author'
+
+export const QUERY = gql`
+  query FindAuthorQuery($id: Int!) {
+    author: user(id: $id) {
+      email
+      fullName
+    }
+  }
+`
+
+export const Loading = () => <span>Loading...</span>
+
+export const Empty = () => <span>Empty</span>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindAuthorQueryVariables>) => (
+  <span style={{ color: 'red' }}>Error: {error?.message}</span>
+)
+
+export const Success = ({
+  author,
+}: CellSuccessProps<FindAuthorQuery, FindAuthorQueryVariables>) => (
+  <span className="author-cell">
+    <Author author={author} />
+  </span>
+)

packages/codemods/src/codemods/v5.x.x/cellQueryResult/__testfixtures__/failureSuccess.input.tsx

@@ -0,0 +1,36 @@
+import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import Author from 'src/components/Author'
+
+export const QUERY = gql`
+  query FindAuthorQuery($id: Int!) {
+    author: user(id: $id) {
+      email
+      fullName
+    }
+  }
+`
+
+export const Loading = () => <span>Loading...</span>
+
+export const Empty = () => <span>Empty</span>
+
+export const Failure = ({
+  error,
+  refetch: rerunQuery,
+  client
+}: CellFailureProps<FindAuthorQueryVariables>) => (
+  <span style={{ color: 'red' }}>Error: {error?.message} {rerunQuery} {client}</span>
+)
+
+export const Success = ({
+  author,
+  refetch,
+  client: apolloClient
+}: CellSuccessProps<FindAuthorQuery, FindAuthorQueryVariables>) => (
+  <span className="author-cell">
+    <Author author={author} refetch={refetch} client={apolloClient}/>
+  </span>
+)

packages/codemods/src/codemods/v5.x.x/cellQueryResult/__testfixtures__/failureSuccess.output.tsx

@@ -0,0 +1,36 @@
+import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import Author from 'src/components/Author'
+
+export const QUERY = gql`
+  query FindAuthorQuery($id: Int!) {
+    author: user(id: $id) {
+      email
+      fullName
+    }
+  }
+`
+
+export const Loading = () => <span>Loading...</span>
+
+export const Empty = () => <span>Empty</span>
+
+export const Failure = ({
+  error,
+
+  queryResult: {refetch: rerunQuery, client}
+}: CellFailureProps<FindAuthorQueryVariables>) => (
+  <span style={{ color: 'red' }}>Error: {error?.message} {rerunQuery} {client}</span>
+)
+
+export const Success = ({
+  author,
+
+  queryResult: {refetch, client: apolloClient}
+}: CellSuccessProps<FindAuthorQuery, FindAuthorQueryVariables>) => (
+  <span className="author-cell">
+    <Author author={author} refetch={refetch} client={apolloClient}/>
+  </span>
+)

packages/codemods/src/codemods/v5.x.x/cellQueryResult/__testfixtures__/refetch.input.tsx

@@ -0,0 +1,33 @@
+import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import Author from 'src/components/Author'
+
+export const QUERY = gql`
+  query FindAuthorQuery($id: Int!) {
+    author: user(id: $id) {
+      email
+      fullName
+    }
+  }
+`
+
+export const Loading = () => <span>Loading...</span>
+
+export const Empty = () => <span>Empty</span>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindAuthorQueryVariables>) => (
+  <span style={{ color: 'red' }}>Error: {error?.message}</span>
+)
+
+export const Success = ({
+  author,
+  refetch
+}: CellSuccessProps<FindAuthorQuery, FindAuthorQueryVariables>) => (
+  <span className="author-cell">
+    <Author author={author} refetch={refetch}/>
+  </span>
+)

packages/codemods/src/codemods/v5.x.x/cellQueryResult/__testfixtures__/refetch.output.tsx

@@ -0,0 +1,34 @@
+import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import Author from 'src/components/Author'
+
+export const QUERY = gql`
+  query FindAuthorQuery($id: Int!) {
+    author: user(id: $id) {
+      email
+      fullName
+    }
+  }
+`
+
+export const Loading = () => <span>Loading...</span>
+
+export const Empty = () => <span>Empty</span>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindAuthorQueryVariables>) => (
+  <span style={{ color: 'red' }}>Error: {error?.message}</span>
+)
+
+export const Success = ({
+  author,
+
+  queryResult: {refetch}
+}: CellSuccessProps<FindAuthorQuery, FindAuthorQueryVariables>) => (
+  <span className="author-cell">
+    <Author author={author} refetch={refetch}/>
+  </span>
+)

packages/codemods/src/codemods/v5.x.x/cellQueryResult/__testfixtures__/refetchClient.input.tsx

@@ -0,0 +1,34 @@
+import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import Author from 'src/components/Author'
+
+export const QUERY = gql`
+  query FindAuthorQuery($id: Int!) {
+    author: user(id: $id) {
+      email
+      fullName
+    }
+  }
+`
+
+export const Loading = () => <span>Loading...</span>
+
+export const Empty = () => <span>Empty</span>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindAuthorQueryVariables>) => (
+  <span style={{ color: 'red' }}>Error: {error?.message}</span>
+)
+
+export const Success = ({
+  author,
+  refetch,
+  client
+}: CellSuccessProps<FindAuthorQuery, FindAuthorQueryVariables>) => (
+  <span className="author-cell">
+    <Author author={author} refetch={refetch} client={client}/>
+  </span>
+)

packages/codemods/src/codemods/v5.x.x/cellQueryResult/__testfixtures__/refetchClient.output.tsx

@@ -0,0 +1,34 @@
+import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import Author from 'src/components/Author'
+
+export const QUERY = gql`
+  query FindAuthorQuery($id: Int!) {
+    author: user(id: $id) {
+      email
+      fullName
+    }
+  }
+`
+
+export const Loading = () => <span>Loading...</span>
+
+export const Empty = () => <span>Empty</span>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindAuthorQueryVariables>) => (
+  <span style={{ color: 'red' }}>Error: {error?.message}</span>
+)
+
+export const Success = ({
+  author,
+
+  queryResult: {refetch, client}
+}: CellSuccessProps<FindAuthorQuery, FindAuthorQueryVariables>) => (
+  <span className="author-cell">
+    <Author author={author} refetch={refetch} client={client}/>
+  </span>
+)