react-router
react-router copied to clipboard
[Feature]: Adding generic type to DeferredData used by defer
What is the new or updated feature that you are suggesting?
When using defer
in loader:
const loader = (client: QueryClient) => {
return async () => {
return defer({
todos: fetch('https://jsonplaceholder.typicode.com/todos/1')
});
};
};
The data
property returned by defer
is Record<string, unknown>
and cannot be typed properly:
return defer({ todos: fetch('http://jsonplaceholder.com')}) as { data: { todos: { userId: number; id: number; title: string; } }}
will result an error Types of property 'data' are incompatible
.
Allowing this syntax would solve it:
defer<{ userId: number; id: number; title: string; }>(fetch('https://jsonplaceholder.typicode.com/todos/1'));
and the return type of defer
will be:
{ data: T } (where T is the generic)
Why should this feature be included?
Allowing proper typing for defer
result.
https://github.com/remix-run/react-router/pull/9642
I'm going to close this out and include it with https://github.com/remix-run/react-router/issues/9641
I'm going to close this out and include it with #9641
Jumping between #9642 and this, it seems like the issue is unresolved?
FWIW, DeferredData
typing is causing me similar typing trouble, and it would be helpful to understand if it something you acknowledge and plan to address, and if so where progress can be tracked (this issue would be a reasonable place in my opinion).
I must have pasted the wrong link - defer
types should be done when we do the types for json
, useLoaderData
, etc. in this proposal: https://github.com/remix-run/react-router/discussions/9854