Loader Errors

[livevsonline]

Hi i am trying to implement a loader into the tanstack router, however i get some Typescript errors while tryint to do so.

This is my Routes.tsx

import './App.css';
import {lazy, Outlet, ReactRouter, RootRoute, Route,} from '@tanstack/react-router';
import {Loader, useLoader} from "@tanstack/react-loaders";
import {convertURLFormRelatedParametersToSearchableSPYObject} from "@/helpers/URLHelper";
import {SpyClient} from "@/API/SpyAPI";

const oAPI = new SpyClient({basePath: ''});

const rootRoute = new RootRoute({
	component: () => {
		return (
			<>
				<Outlet/>
			</>
		)
	},
})

const runningAndShippedLoader = new Loader({
	key: 'purchaseRunningShipped',
	loader: async (params) => {
		return await oAPI.getSalesRunningPage(convertURLFormRelatedParametersToSearchableSPYObject());
	},
})

const runningAndShippedRoute = new Route({
	id: 'purchaseRunningShipped',
	getParentRoute: () => rootRoute,
	path: '/app/purchase/running/shipped',
	async loader() {
		// Wait for the loader to finish
		await runningAndShippedLoader.load()
	},
	component: () => {
		const posts = useLoader({loader: runningAndShippedLoader})

		return <div>Hi</div>
	},
	// component: lazy(() => import("@/pages/purchase/running/RunningAndShipped")),
});

const routeTree = rootRoute.addChildren([
	salesRoute,
	runningAndShippedRoute,
]);

export const router = new ReactRouter({
	routeTree,
	defaultPreload: 'intent',
});

The two errors are placed at:

#1: async loader()

argument of type '{ id: "purchaseRunningShipped"; getParentRoute: () => RootRoute<{}, RouteContext, RouterContext>; path: "/app/purchase/running/shipped"; loader(): Promise<...>; component: () => Element; }' is not assignable to parameter of type 'RouteOptions<RootRoute<{}, RouteContext, RouterContext>, "purchaseRunningShipped", "/app/purchase/running/shipped", {}, {}, {}, {}, Record<...>, ... 4 more ..., RouterContext & RouteContext>'.   Object literal may only specify known properties, and 'loader' does not exist in type 'RouteOptions<RootRoute<{}, RouteContext, RouterContext>, "purchaseRunningShipped", "/app/purchase/running/shipped", {}, {}, {}, {}, Record<...>, ... 4 more ..., RouterContext & RouteContext>'.

#2: const posts = useLoader({loader: runningAndShippedLoader})

TS2345: Argument of type '{ loader: Loader<"purchaseRunningShipped", unknown, SalesRunningPage, Error>; }' is not assignable to parameter of type '{ key: unknown; track?: ((loaderStore: LoaderStore<any, any>) => any) | undefined; } & { variables?: any; }'.   Object literal may only specify known properties, and 'loader' does not exist in type '{ key: unknown; track?: ((loaderStore: LoaderStore<any, any>) => any) | undefined; } & { variables?: any; }'.

Im unsure of what im doing wrong here, i feel like the code correlate with the code in the documentation: https://tanstack.com/router/v1/docs/guide/data-loading

Does someone know what im doing wrong here? :)

[ryanstaniforth]

I'm also experiencing this issue. I'm not sure the loader option is implemented on Route's yet. Can you give some insight please @tannerlinsley?

[ryanstaniforth]

Nope :D

[livevsonline]

Damn :D maybe he's very busy with all of these cool packages :)

[pawelblaszczyk5]

Afaik, Tanner is on 2 weeks break from OSS, he posted it on Discord around 27th of February

[ryanstaniforth]

Thank you, I wasn't aware :)

[livevsonline]

Ahhh that makes sense, i will join the Discord later when i get home from work :)

[qtsd]

It looks like the api has changed (check here 3581aec), and the doc reflects these changes despite there is no tagged version yet.
It just works if you replace loader by onLoad and useLoader by useLoaderInstance.

[livevsonline]

Sure, its a bit confusing now as we are not following the documentation :D

tiny-invariant.js:12 Uncaught Error: Invariant failed: useLoaderInstance must be used inside a <LoaderClientProvider> component!
    at invariant (tiny-invariant.js:12:11)

My code looks like this now:

const runningAndShippedLoader = new Loader({
	key: 'purchaseRunningShippedLoader',
	loader: async (params) => {
		const SystemInfo = await oAPI.GetSystemInfo();
		console.log('RUNNING AND SHIPPED SYSTEM INFO: ', SystemInfo);
		return SystemInfo;
	},
})

const loaderClient = new LoaderClient({
	getLoaders: () => {
		return [
			runningAndShippedLoader,
		]
	},
});

const rootRoute = RootRoute.withRouterContext<{
	loaderClient: typeof loaderClient,
}>()({
	errorComponent: () => <ErrorLoadingPage/>
})

const runningAndShippedRoute = new Route({
	id: 'purchaseRunningShipped',
	path: '/app/purchase/running/shipped',
	getParentRoute: () => rootRoute,
	async onLoad({context, routeContext}) {
		return await context.loaderClient.getLoader({key: runningAndShippedLoader.key})
			.load()
			.then((e) => {
				console.log('IAM THEN : ', e);
				return e;
			});
	},
	component: (e) => {
		const testLoaded = useLoaderInstance({
			key: runningAndShippedLoader.key
		});

		console.log('testLoaded', testLoaded);
		return <div>Hi</div>
	},
	// component: lazy(() => import("@/pages/purchase/running/RunningAndShipped")),
});

const routeTree = rootRoute.addChildren([
	runningAndShippedRoute,
]);

export const router = new ReactRouter({
	routeTree,
	defaultPreload: 'intent',
	context: {
		loaderClient,
	},
});

[qtsd]

The ReactDOM.createRoot() part is missing in your comment, but it seems that you forgot to wrap in LoaderClientProvider :

  <LoaderClientProvider loaderClient={loaderClient}>
    <RouterProvider router={router} />
  </LoaderClientProvider>

[livevsonline]

The ReactDOM.createRoot() part is missing in your comment, but it seems that you forgot to wrap in LoaderClientProvider :

  <LoaderClientProvider loaderClient={loaderClient}>
    <RouterProvider router={router} />
  </LoaderClientProvider>

Ahh yes, i seem to have somehow missed that part, really cool thanks!

It seems to work, i do however have one question which is how do i pass the data to the component?, im lazy loading the page component like this:

	component: lazy(() => {
		const testLoaded = useLoaderInstance({
			key: runningAndShippedLoader.key
		});

		return import("@/pages/purchase/running/RunningAndShipped");
	}),

[qtsd]

I haven't tried but this should work :

component: lazy(async () => {
	const MyComponent = await import("@/pages/purchase/running/RunningAndShipped");

	return function MyComponentWithData() {
		const loaderInstance = useLoaderInstance({
			key: runningAndShippedLoader.key
		});

		return <MyComponent data={loaderInstance.state.data} />;
	};
});

But I think I wouldn't do that, and call useLoaderInstance in the component directly.

Doing this would require you to type the data twice (in the loader and in the component).
And although it is tempting to decouple yours components from the router, you will still need to use the Link component in theses.

I lack of knowledge on the subject, so if anyone want to share their thoughts, that would be welcome.

[tansanDOTeth]

@livevsonline I followed your setup and it seems to be working on mine now! There are so many conflicting resources. Where are you mainly looking to find a working example?

Edit: Actually, I am running into this error even with the provider

useLoaderInstance) is not a function