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
Changes from 22 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
40 changes: 31 additions & 9 deletions packages/web/src/components/createCell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { useQuery } from './GraphQLHooksProvider'
*
* If the Cell does not have a `beforeQuery` function, then the variables are required.
*
* Note that a query that doesnt take any variables is defined as {[x: string]: never}
* Note that a query that doesn't take any variables is defined as {[x: string]: never}
* The ternary at the end makes sure we don't include it, otherwise it won't allow merging any
* other custom props from the Success component.
*
Expand Down Expand Up @@ -293,8 +293,13 @@ export function createCell<

// queryRest includes `variables: { ... }`, with any variables returned
// from beforeQuery
// eslint-disable-next-line prefer-const
let { error, loading, data, ...queryRest } = useQuery(query, options)
let {
// eslint-disable-next-line prefer-const
error,
loading,
data,
...queryResult
} = useQuery(query, options)

if (globalThis.__REDWOOD__PRERENDERING) {
// __REDWOOD__PRERENDERING will always either be set, or not set. So
Expand Down Expand Up @@ -331,7 +336,7 @@ export function createCell<

// All of the gql client's props aren't available when pre-rendering,
// so using `any` here
queryRest = { variables } as any
queryResult = { variables } as any
} else {
queryCache[cacheKey] ||
(queryCache[cacheKey] = {
Expand All @@ -345,13 +350,23 @@ export function createCell<

if (error) {
if (Failure) {
// errorCode is not part of the type returned by useQuery
// but it is returned as part of the queryResult
type QueryResultWithErrorCode = typeof queryResult & {
errorCode: string
}

return (
<Failure
error={error}
errorCode={error.graphQLErrors?.[0]?.extensions?.['code'] as string}
errorCode={
// Use the ad-hoc QueryResultWithErrorCode type to access the errorCode
(queryResult as QueryResultWithErrorCode).errorCode ??
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure that adding an ad-hoc type is the best way to handle the errorCode. would love feedback on this fix 🤓

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a change to existing behavior, right? Where exactly is errorCode coming from? Why weren't we using it before?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This showed up when running the test suite on this test: https://github.com/redwoodjs/redwood/blob/main/packages/web/src/components/createCell.test.tsx#L260

Before my change the queryRest destructuring was overriding the errorCode prop:

          <Failure
            error={error}
            errorCode={error.graphQLErrors?.[0]?.extensions?.['code'] as string}
            {...props}
            updating={loading}
            {...queryRest} // <---- Overwrites errorCode because it's one of `queryRest` members. it also overwrites error
          />

But because it's now a part of queryResult the errorCode is never set. So the test referenced above fails.

Should we be destructuring and overwriting error and errorCode?

(error.graphQLErrors?.[0]?.extensions?.['code'] as string)
}
{...props}
updating={loading}
{...queryRest}
queryResult={queryResult}
/>
)
} else {
Expand All @@ -366,7 +381,7 @@ export function createCell<
{...props}
{...afterQueryData}
updating={loading}
{...queryRest}
queryResult={queryResult}
/>
)
} else {
Expand All @@ -375,12 +390,19 @@ export function createCell<
{...props}
{...afterQueryData}
updating={loading}
{...queryRest}
queryResult={queryResult}
/>
)
}
} else if (loading) {
return <Loading {...{ ...queryRest, ...props }} />
return (
<Loading
{...{
queryResult,
...props,
}}
/>
esteban-url marked this conversation as resolved.
Show resolved Hide resolved
)
} else {
/**
* There really shouldn't be an `else` here, but like any piece of software, GraphQL clients have bugs.
Expand Down