Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Single-fetch typesafety #9893

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

Merged
merged 17 commits into from
Aug 28, 2024
Merged

Single-fetch typesafety #9893

Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
14a41dc
remove single-fetch type overrides
pcattori Aug 20, 2024
8bd47a6
remove single-fetch types for client args
pcattori Aug 20, 2024
1384616
remove single-fetch types
pcattori Aug 20, 2024
b83c40a
remove single-fetch type helpers
pcattori Aug 20, 2024
4205f23
fallback to `undefined` for unserializable values w/ single-fetch
pcattori Aug 20, 2024
e872696
trigger single-fetch types via `future` interface merging
pcattori Aug 20, 2024
e2083ad
serialize non-native objects via their enumerable string properties
pcattori Aug 27, 2024
54a0dcf
test turbo-stream serialization for class instance properties
pcattori Aug 28, 2024
5a3277d
unstable prefix for `Future.unstable_singleFetch` type
pcattori Aug 28, 2024
661d1a4
explicitly test single-fetch array types
pcattori Aug 28, 2024
c8a5f9d
tests for ReadOnlyArray within single-fetch types
pcattori Aug 28, 2024
84d91c2
do not re-export `Future` interface
pcattori Aug 28, 2024
ddf6f76
docs for single-fetch types
pcattori Aug 28, 2024
fc01d82
changeset for singe-fetch typesafety
pcattori Aug 28, 2024
7c935a9
fix lint errors
pcattori Aug 28, 2024
fe0ef91
Merge branch 'dev' into single-fetch-typesafety
pcattori Aug 28, 2024
599ed30
fix typo
pcattori Aug 28, 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
Prev Previous commit
Next Next commit
fix lint errors
  • Loading branch information
@pcattori
pcattori committed Aug 28, 2024
commit 7c935a95d1fe17129f88e8ebedf93ebc716f8e18
30 changes: 21 additions & 9 deletions docs/guides/single-fetch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,11 @@ export function loader() {
date: new Date(),
};
}
const data = useLoaderData<typeof loader>();
// ^? { planet: string, date: Date }

export default function Component() {
const data = useLoaderData<typeof loader>();
// ^? { planet: string, date: Date }
}
```

#### Functions and class instances
Expand All @@ -186,8 +189,11 @@ export function loader() {
notSoRandom: () => 7,
};
}
const data = useLoaderData<typeof loader>();
// ^? { planet: string, date: Date, notSoRandom: undefined }

export default function Component() {
const data = useLoaderData<typeof loader>();
// ^? { planet: string, date: Date, notSoRandom: undefined }
}
```

Methods are also not serializable, so class instances get slimmed down to just their serializable properties:
Copy link
Member

Choose a reason for hiding this comment

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

@pcattori Couldn't Remix call classInstance.toJSON()? If it's not defined then grab the serializable properties automatically

Copy link
Contributor Author

@pcattori pcattori Aug 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

It could but that's what json(...) is for. The mental model for Single Fetch is that types are preserved as much as possible. We don't want a class with a bunch of serializable properties (Date, bigint, RegExp, etc.) to show up as a bag of strings on the client.

Expand Down Expand Up @@ -216,8 +222,11 @@ export function loader() {
spot: new Dog("Spot", 3),
};
}
const data = useLoaderData<typeof loader>();
// ^? { planet: string, date: Date, spot: { name: string, age: number, bark: undefined } }

export default function Component() {
const data = useLoaderData<typeof loader>();
// ^? { planet: string, date: Date, spot: { name: string, age: number, bark: undefined } }
}
```

#### `clientLoader` and `clientAction`
Expand All @@ -237,16 +246,19 @@ class Dog {
}

// Make sure to annotate the types for the args! 👇
export function clientLoader({}: ClientLoaderFunctionArgs) {
export function clientLoader(_: ClientLoaderFunctionArgs) {
return {
planet: "world",
date: new Date(),
notSoRandom: () => 7,
spot: new Dog("Spot", 3),
};
}
const data = useLoaderData<typeof clientLoader>();
// ^? { planet: string, date: Date, notSoRandom: () => number, spot: Dog }

export default function Component() {
const data = useLoaderData<typeof clientLoader>();
// ^? { planet: string, date: Date, notSoRandom: () => number, spot: Dog }
}
```

### Headers
Expand Down
Loading