T
TanStack•2y ago
exotic-emerald

What would cause the `loader` to be called without `context`?

I destructure the context parameter in the loader function of my route, but randomly, it sometimes throws the error (destructured parameter).context is undefined. Refreshing the page fixes the issue, but I am not sure why the issue is happening in the first place. My beforeLoad method always returns a value (unless the user isn't authenticated, in which case it throws a redirect, but that is not happening here), so from what I can tell, context should never be undefined... 
export const Route = createFileRoute('/orders/search')({
    validateSearch: orderSearchParamsSchema,
    wrapInSuspense: true,
    beforeLoad: async ({ context, location, search }) => {
        await requireAuth({ context, location });

        return {
            ordersQueryOptions: queryOptions({
                queryKey: ['order-search', search],
                queryFn: () => getOrderSearchResults(search),
                placeholderData: keepPreviousData,
                throwOnError: true,
            }),
            optionsQueryOptions: queryOptions({
                queryKey: ['order-search-options'],
                queryFn: () => getOrderSearchOptions(),
                placeholderData: keepPreviousData,
                staleTime: 5 * 60 * 1000, // 5 minutes
            }),
        };
    },
    loaderDeps: ({ search }) => [search],
    loader: ({
        context: {
            queryClient,
            ordersQueryOptions,
            optionsQueryOptions
        },
    }) => {
        void queryClient.prefetchQuery(ordersQueryOptions);
        void queryClient.prefetchQuery(optionsQueryOptions);
    },
});
export const Route = createFileRoute('/orders/search')({
    validateSearch: orderSearchParamsSchema,
    wrapInSuspense: true,
    beforeLoad: async ({ context, location, search }) => {
        await requireAuth({ context, location });

        return {
            ordersQueryOptions: queryOptions({
                queryKey: ['order-search', search],
                queryFn: () => getOrderSearchResults(search),
                placeholderData: keepPreviousData,
                throwOnError: true,
            }),
            optionsQueryOptions: queryOptions({
                queryKey: ['order-search-options'],
                queryFn: () => getOrderSearchOptions(),
                placeholderData: keepPreviousData,
                staleTime: 5 * 60 * 1000, // 5 minutes
            }),
        };
    },
    loaderDeps: ({ search }) => [search],
    loader: ({
        context: {
            queryClient,
            ordersQueryOptions,
            optionsQueryOptions
        },
    }) => {
        void queryClient.prefetchQuery(ordersQueryOptions);
        void queryClient.prefetchQuery(optionsQueryOptions);
    },
});
TypeError: (destructured parameter).context is undefined
    loader orders.search.tsx:58
    fetch router.ts:1519
    fetchWithRedirectAndNotFound router.ts:1628
    loadMatches router.ts:1646
    loadMatches router.ts:1426
    loadMatches router.ts:1656
    loadMatches router.ts:1251
    loadMatches router.ts:1741
    load router.ts:1751
    startTransition React
    load router.ts:1698
    tryLoad RouterProvider.tsx:132
    unsub RouterProvider.tsx:144
    notify index.ts:75
    notify index.ts:75
    push index.ts:107
    tryNavigation index.ts:89
    push index.ts:105
    commitLocation router.ts:1155
    handleClick link.tsx:614
    composeHandlers link.tsx:673
    composeHandlers link.tsx:671
    React 23
    <anonymous> main.tsx:29
 
CatchBoundaryImpl@http://localhost:3000/dist/.vite/redacted/deps/chunk-UOE5TPK6.js?v=ae137c47:687:5
CatchBoundary@http://localhost:3000/dist/.vite/redacted/deps/chunk-UOE5TPK6.js?v=ae137c47:667:26
Suspense
Match@http://localhost:3000/dist/.vite/redacted/deps/chunk-UOE5TPK6.js?v=ae137c47:1002:15
Outlet2@http://localhost:3000/dist/.vite/redacted/deps/chunk-UOE5TPK6.js?v=ae137c47:1161:18
main
_Box<@http://localhost:3000/dist/.vite/redacted/deps/chunk-FVTMWTQ7.js?v=ae137c47:3590:3
AppShellMain<@http://localhost:3000/dist/.vite/redacted/deps/chunk-FVTMWTQ7.js?v=ae137c47:11996:25
TypeError: (destructured parameter).context is undefined
    loader orders.search.tsx:58
    fetch router.ts:1519
    fetchWithRedirectAndNotFound router.ts:1628
    loadMatches router.ts:1646
    loadMatches router.ts:1426
    loadMatches router.ts:1656
    loadMatches router.ts:1251
    loadMatches router.ts:1741
    load router.ts:1751
    startTransition React
    load router.ts:1698
    tryLoad RouterProvider.tsx:132
    unsub RouterProvider.tsx:144
    notify index.ts:75
    notify index.ts:75
    push index.ts:107
    tryNavigation index.ts:89
    push index.ts:105
    commitLocation router.ts:1155
    handleClick link.tsx:614
    composeHandlers link.tsx:673
    composeHandlers link.tsx:671
    React 23
    <anonymous> main.tsx:29
 
CatchBoundaryImpl@http://localhost:3000/dist/.vite/redacted/deps/chunk-UOE5TPK6.js?v=ae137c47:687:5
CatchBoundary@http://localhost:3000/dist/.vite/redacted/deps/chunk-UOE5TPK6.js?v=ae137c47:667:26
Suspense
Match@http://localhost:3000/dist/.vite/redacted/deps/chunk-UOE5TPK6.js?v=ae137c47:1002:15
Outlet2@http://localhost:3000/dist/.vite/redacted/deps/chunk-UOE5TPK6.js?v=ae137c47:1161:18
main
_Box<@http://localhost:3000/dist/.vite/redacted/deps/chunk-FVTMWTQ7.js?v=ae137c47:3590:3
AppShellMain<@http://localhost:3000/dist/.vite/redacted/deps/chunk-FVTMWTQ7.js?v=ae137c47:11996:25
4 Replies
other-emerald
other-emerald•2y ago
we fixed a few context issues lately, which version are you using?
exotic-emerald
exotic-emeraldOP•2y ago
"@tanstack/react-query": "^5.32.1",
"@tanstack/react-query-devtools": "^5.32.1",
"@tanstack/react-router": "^1.31.1",
"@tanstack/router-devtools": "^1.31.1",
"@tanstack/router-vite-plugin": "^1.30.0",
"@tanstack/react-query": "^5.32.1",
"@tanstack/react-query-devtools": "^5.32.1",
"@tanstack/react-router": "^1.31.1",
"@tanstack/router-devtools": "^1.31.1",
"@tanstack/router-vite-plugin": "^1.30.0",
It "should" be latest since I am using ^ but let me manually update them to the latest and see if there is any changes to the behavior. Updating did seem to fix a couple of generation issues (specifically one of the lazy routes was using createFileRoute when it should have been using createLazyFileRoute). I will let you know if I still encounter the issue. Thanks!
round-purple
round-purple•2y ago
Hey Manuel, sorry to also ask you this, have the changes by any chance fixed this issue https://discord.com/channels/719702312431386674/1247925709893271552
other-emerald
other-emerald•2y ago
not that I am aware of

Did you find this page helpful?