you can just upgrade to start simply to use SSR
#"Upgrading" from TanStack Router to Start
odd kelp
you don't need to use any of the other server stuff like server functions if you don't want to
we don't have a dedicated upgrade guide yet, but you can just follow this guide and skip the router stuff as you already have that set up
stark flare
https://tanstack.com/start/latest/docs/framework/react/build-from-scratch
Thanks a bunch!
stark flare
let me know if you encounter any issues
I think it works well up to this point - https://github.com/catalinpit/learn-platform/pull/17/files
It just broke my auth, so I need to see how it's done in Start
odd kelp
where is the auth part?
stark flare
where is the auth part?
It was in main.tsx
export function RouterWithAuthContext() {
const { data: auth, isPending, error } = useSession();
if (!isPending && !error) {
return <RouterProvider router={router} context={{ auth }} />;
}
}
createRoot(document.getElementById("root")!).render(
<StrictMode>
<QueryClientProvider client={queryClient}>
<RouterWithAuthContext />
</QueryClientProvider>
</StrictMode>
);
yeah that won't work with start
ideally don't have the auth depending on react
so you can use it in a beforeLoad
stark flare
ideally don't have the auth depending on react
yeah... I think I just gave myself more work unnecessarily by adding Start. Now I have to update too many things. 😅
Thank you!
stark flare
so you can use it in a beforeLoad
I try to do this in __root.tsx but my app doesn't load. Am I doing something wrong?
export const Route = createRootRouteWithContext<MyRouterContext>()({
beforeLoad: async ({ context }) => {
const data = await context.queryClient.fetchQuery({
queryKey: ['user'],
queryFn: () => fetchUser(),
});
return {
user: data,
}
},
The app doesn’t load. I can’t see the app itself. Don’t know how to better explain this. I go to the url and nothing happens.
odd kelp
any server side logs?
stark flare
any server side logs?
Nope. This is my fetching function
import { createServerFn } from "@tanstack/react-start";
import { getWebRequest } from "@tanstack/react-start/server";
import { getSession } from "../auth-client";
export const fetchUser = createServerFn({ method: "GET"}).handler(async () => {
const { headers } = getWebRequest();
const { data } = await getSession({ fetchOptions: { headers } });
return data?.user || null;
});
Using getSession in the _authenticated file works though. Should I do it this way then - https://github.com/catalinpit/learn-platform/pull/17/files#diff-f9eec140c7250c946b08aa5ad9d2182dffe1d763f3c52d826fc1ac42a64e4627 ?
