-
Notifications
You must be signed in to change notification settings - Fork 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.
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
Cannot use defer on a loader with typesafeBrowserRouter #16
Comments
could I ask you to try to refactor your loader to the following? I believe it's the fact returning defer isn't overlapping with the import { defer, makeLoader } from 'react-router-typesafe';
...
export const dashboardLoader = (queryClient: QueryClient) => makeLoader(() => {
return defer<{
dashboardInfo: Promise<DashboardType>;
}>({
dashboardInfo: queryClient.ensureQueryData(dashboardInfoQueries.info()),
});
}); the single change here is makeLoader: it’ll auto-add a satisfies keyword to make sure you’re returning a loader-compatible value. You may get a ts error if that defer doesn't match, which is my main bet! on a personal note, refrain from declaring the generic parameter on the |
I figured out that I get this error on a regular loader too since I moved it outside the lazy loaded module.
Related to the typing of the defer definitely: |
and you’re saying it doesn’t error on a regular could you make a minimal reproduction? I’d love to fix that |
Yup I made this real quick.. not sure what is going on with the type of Here is the repro: |
When I define the generic on Like this: export const dashboardLoader = (queryClient: QueryClient) =>
makeLoader<LoaderFunction<any>>(() => {
return defer({
dashboardInfo: queryClient.fetchQuery(dashboardInfoQueries.info()),
});
}); Edit: but then |
Found out what the actual issue is and I've changed the code in the codesandbox repro. As you can see, I get the error when I lazy load only the component. If I don't lazy load anything or lazy load both the component and loader then everything works correctly. So these versions work: {
index: true,
async lazy() {
const { Dashboard, dashboardLoader } = await import('@/views/dashboard/Dashboard');
return { element: <Dashboard />, loader: dashboardLoader(queryClient) };
},
}, and {
index: true,
element: <Dashboard />,
loader: dashboardLoader(queryClient)
}, but this one errors: {
index: true,
loader: dashboardLoader(queryClient),
async lazy() {
const { Dashboard } = await import('@/views/dashboard/Dashboard');
return { element: <Dashboard /> };
},
}, |
hey mate, appreciate the repro, I’m currently pretty sick so will be back next week. Have you had a look at the React Conf talk by Ryan? it looks like this library will be implemented internally as well, I’m really happy by that! |
I hope you are well now.. watched it a couple of days ago. I started migrating an app just before to the new data router so I can slowly transfer it to remix SPA and SSR after that, so I am really excited about this 😃 |
I have a loader with defer:
and I have a RouteObject like this in
typesafeBrowserRouter
:I get an error:
Type () => DeferredData<{ dashboardInfo: Promise<DashboardType>; }> is not assignable to type NarrowKeys<boolean | LoaderFunction<any> | undefined>
This doesn't happen when I am using a regular loader without defer.
Oh, and when I just switch from
typesafeBrowserRouter
tocreateBrowserRouter
everything works just fine since then, loader doesn't have that NarrowKeys type.The text was updated successfully, but these errors were encountered: