Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: avoid naming conflict with client prop #7024

Merged
merged 32 commits into from
Mar 2, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
ddc5f41
fix: avoid naming conflict with `client` prop
esteban-url Dec 5, 2022
fd48a95
fix: disable lint error for prefer-const
esteban-url Dec 5, 2022
76d7967
Merge branch 'main' into er-client-name-conflict
esteban-url Dec 6, 2022
6223bd8
Merge branch 'main' into er-client-name-conflict
esteban-url Dec 6, 2022
fc57f82
Merge branch 'redwoodjs:main' into er-client-name-conflict
esteban-url Dec 7, 2022
b991c9a
Merge branch 'main' into er-client-name-conflict
esteban-url Dec 8, 2022
d2882de
Merge branch 'main' into er-client-name-conflict
esteban-url Dec 9, 2022
ef0dfda
Merge branch 'main' into er-client-name-conflict
esteban-url Dec 10, 2022
e400605
Merge branch 'main' into er-client-name-conflict
esteban-url Dec 11, 2022
69d82c2
Merge branch 'main' into er-client-name-conflict
esteban-url Dec 15, 2022
4a8bfb9
Merge branch 'main' into er-client-name-conflict
esteban-url Dec 18, 2022
d5076ea
Merge branch 'main' into er-client-name-conflict
esteban-url Dec 22, 2022
15b2087
Merge branch 'main' into er-client-name-conflict
esteban-url Dec 27, 2022
1b42989
Merge branch 'main' into er-client-name-conflict
esteban-url Jan 8, 2023
7fdbdcb
Merge branch 'main' into er-client-name-conflict
esteban-url Jan 10, 2023
2c04417
Merge branch 'main' into er-client-name-conflict
esteban-url Jan 19, 2023
06fe88c
Merge branch 'main' into er-client-name-conflict
esteban-url Jan 29, 2023
39feae7
Merge branch 'main' into er-client-name-conflict
esteban-url Jan 31, 2023
8af713a
Merge branch 'main' into er-client-name-conflict
esteban-url Feb 3, 2023
ae2bca6
Merge branch 'main' into er-client-name-conflict
esteban-url Feb 7, 2023
129da34
refactor: group variables under queryResult
esteban-url Feb 7, 2023
0d2b9e6
fix: add type safety for handling errorCode
esteban-url Feb 7, 2023
40350de
Merge branch 'main' into er-client-name-conflict
esteban-url Feb 7, 2023
7a1aad5
Merge branch 'main' into er-client-name-conflict
esteban-url Feb 8, 2023
c49f512
Merge branch 'main' into er-client-name-conflict
esteban-url Feb 9, 2023
1d89820
refactor: deconstruct props directly
esteban-url Feb 9, 2023
9ed4084
Merge branch 'main' into er-client-name-conflict
esteban-url Feb 10, 2023
3faae96
Merge branch 'main' into er-client-name-conflict
esteban-url Feb 23, 2023
ec3808c
Merge branch 'main' into er-client-name-conflict
esteban-url Mar 1, 2023
d1f57f6
Codemod for cell parameter adjustments
Josh-Walker-GM Mar 1, 2023
9557318
Merge branch 'main' into er-client-name-conflict
Josh-Walker-GM Mar 1, 2023
c5a6f37
Merge branch 'main' into er-client-name-conflict
jtoar Mar 2, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions packages/codemods/src/codemods/v5.x.x/cellQueryResult/README.md
Original file line number Diff line number Diff line change
@@ -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} />
}
```
Original file line number Diff line number Diff line change
@@ -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>
)
Original file line number Diff line number Diff line change
@@ -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>
)
Original file line number Diff line number Diff line change
@@ -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>
)
Original file line number Diff line number Diff line change
@@ -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>
)
Original file line number Diff line number Diff line change
@@ -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>
)
Original file line number Diff line number Diff line change
@@ -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>
)
Original file line number Diff line number Diff line change
@@ -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>
)
Original file line number Diff line number Diff line change
@@ -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>
)
Original file line number Diff line number Diff line change
@@ -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>
)
Original file line number Diff line number Diff line change
@@ -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>
)
Loading