react-router icon indicating copy to clipboard operation
react-router copied to clipboard

[Feature]: Adding generic type to DeferredData used by defer

Open bennyk8y opened this issue 1 year ago • 1 comments

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.

bennyk8y avatar Nov 27 '22 07:11 bennyk8y

https://github.com/remix-run/react-router/pull/9642

bennyk8y avatar Nov 27 '22 07:11 bennyk8y

I'm going to close this out and include it with https://github.com/remix-run/react-router/issues/9641

brophdawg11 avatar Jan 09 '23 22:01 brophdawg11

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).

jgarplind avatar Jan 30 '23 21:01 jgarplind

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

brophdawg11 avatar Jan 30 '23 21:01 brophdawg11