Skip to content

[POC] Enable experimental semantic nullability in Grats and Relay #1

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.

Sign up for GitHub

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

Open
captbaritone wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[POC] Enable experimental semantic nullability in Grats and Relay #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5bb492
Enable experimental support for semantic nullability
captbaritone Feb 5, 2024
0a39949
Upgrade to Grats 0.0.24
captbaritone Mar 25, 2024
674c2ab
Update to use @throwOnFieldError
captbaritone Aug 13, 2024
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
38 changes: 35 additions & 3 deletions client/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { createRoot } from "react-dom/client";
import { useLazyLoadQuery } from "react-relay";
import { useFragment, useLazyLoadQuery } from "react-relay";
import {
GraphQLResponse,
RecordSource,
Expand All @@ -10,14 +10,17 @@ import {
} from "relay-runtime";
import { AppQuery } from "./__generated__/AppQuery.graphql";
import { RelayEnvironmentProvider } from "react-relay";
import { Environment, Network } from "relay-runtime";
import { Environment, Network, RelayFeatureFlags } from "relay-runtime";
import { Suspense } from "react";
import { AppChildComponent$key } from "./__generated__/AppChildComponent.graphql";
import { ErrorBoundary } from "react-error-boundary";

function App() {
const data = useLazyLoadQuery<AppQuery>(
graphql`
query AppQuery {
query AppQuery @throwOnFieldError {
greeting
...AppChildComponent
}
`,
{},
Expand All @@ -26,10 +29,39 @@ function App() {
<div>
<h1>Welcome to Grats + Relay</h1>
Server says: "{data.greeting}"
<ErrorBoundary fallback={<Fallback />}>
<ChildComponent query={data} />
</ErrorBoundary>
</div>
);
}

function Fallback() {
return (
<span style={{ border: "1px solid pink", padding: "10px" }}>
Oops! Something went wrong
</span>
);
}

function ChildComponent(props: { query: AppChildComponent$key }) {
const data = useFragment(
graphql`
fragment AppChildComponent on Query @throwOnFieldError {
# When this errors, the component will throw and
# the error will be caught by the ErrorBoundary
alwaysThrows
Copy link
Copy Markdown
Owner Author

@captbaritone captbaritone Feb 5, 2024

Choose a reason for hiding this comment

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

When this field errors, it is contained by the surrounding ErrorBoundary on line 32

}
`,
props.query,
);

return <div>Server says: "{data.alwaysThrows}"</div>;
}

// @ts-ignore DefinitelyTyped is missing this
RelayFeatureFlags.ENABLE_FIELD_ERROR_HANDLING = true;

async function fetchGraphQL(
request: RequestParameters,
variables: Variables,
Expand Down
44 changes: 44 additions & 0 deletions client/__generated__/AppChildComponent.graphql.ts
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 35 additions & 17 deletions client/__generated__/AppQuery.graphql.ts
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 6 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"relay": "relay-compiler",
"format": "prettier --write .",
"parcel": "parcel ./client/index.html --open",
"server": "node --watch --loader ts-node/esm server/server.ts",
"server": "ts-node server/server.ts",
"build": "grats && relay-compiler && tsc && parcel build ./client/index.html",
"start": "concurrently --prefix-colors yellow,blue,magenta,cyan -n server,client,relay,grats \"npm run server\" \"npm run parcel\" \"npm run relay -- --watch\" \"npm run grats -- --watch\""
},
Expand All @@ -23,12 +23,12 @@
"@types/relay-runtime": "^14.1.22",
"babel-plugin-relay": "^16.1.0",
"concurrently": "^8.2.2",
"grats": "^0.0.20",
"grats": "0.0.0-main-bc5527cb",
"grats-ts-plugin": "^0.0.2",
"parcel": "^2.11.0",
"prettier": "^3.2.5",
"process": "^0.11.10",
"relay-compiler": "^16.1.0",
"relay-compiler": "0.0.0-main-43bd9bed",
"ts-node": "^10.9.2",
"typescript": "^5.3.3"
},
Expand All @@ -37,8 +37,9 @@
"graphql-yoga": "^5.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-relay": "^16.1.0",
"relay-runtime": "^16.1.0"
"react-error-boundary": "^4.0.12",
"react-relay": "0.0.0-main-43bd9bed",
"relay-runtime": "0.0.0-main-43bd9bed"
},
"prettier": {}
}
Loading