TanStackT
TanStack•2y ago•
6 replies
verbal-lime

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);
    },
});


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
Was this page helpful?