Tanstack Start Question
I have a question related to tanstack start, My initial call in the root route beforeLoad is to basically get the config from backend.
After that I wanna use that config to setup few clients like authClient and apiClient both of these use baseUrl from config.
the issue is I am getting error while initializing these clients in beforeLoad due to ssr since these are not serializable. Ideally I wanna put them in context so that we can use it throughout our application.
what is the recommended way to setup such clients in tanstack start?
Similar setup I was able to do when using tanstack router alone since that was client only
```
// setup in client only tanstack router working fine
export const Route = createRootRouteWithContext<MyRouterContext>()({
beforeLoad: async ({context, location}) => {
// root route beforeLoad runs on every navigation
console.log("root route beforeLoad", location.pathname);
// this is the initial config we need to load before anything else
const deployConfig = await context.queryClient.ensureQueryData(deployConfigQueryOptions());
const appConfig = await context.queryClient.ensureQueryData(
appConfigQueryOptions({tenantCode: deployConfig.tenantCode, environment: deployConfig.environment}),
);
// since apiClient is dependent on appConfig, we are creating it right after appConfig is loaded
const apiClient = await context.queryClient.ensureQueryData(
apiClientQueryOptions({prefixUrl: appConfig.api.baseUrl}),
);
const {authClient} = await context.queryClient.ensureQueryData(
authClientQueryOptions({baseURL: appConfig.api.baseUrl}),
);
return {
tenantCode: deployConfig.tenantCode,
environment: deployConfig.environment,
appConfig,
apiClient,
authClient,
};
},
```
After that I wanna use that config to setup few clients like authClient and apiClient both of these use baseUrl from config.
the issue is I am getting error while initializing these clients in beforeLoad due to ssr since these are not serializable. Ideally I wanna put them in context so that we can use it throughout our application.
what is the recommended way to setup such clients in tanstack start?
Similar setup I was able to do when using tanstack router alone since that was client only
```
// setup in client only tanstack router working fine
export const Route = createRootRouteWithContext<MyRouterContext>()({
beforeLoad: async ({context, location}) => {
// root route beforeLoad runs on every navigation
console.log("root route beforeLoad", location.pathname);
// this is the initial config we need to load before anything else
const deployConfig = await context.queryClient.ensureQueryData(deployConfigQueryOptions());
const appConfig = await context.queryClient.ensureQueryData(
appConfigQueryOptions({tenantCode: deployConfig.tenantCode, environment: deployConfig.environment}),
);
// since apiClient is dependent on appConfig, we are creating it right after appConfig is loaded
const apiClient = await context.queryClient.ensureQueryData(
apiClientQueryOptions({prefixUrl: appConfig.api.baseUrl}),
);
const {authClient} = await context.queryClient.ensureQueryData(
authClientQueryOptions({baseURL: appConfig.api.baseUrl}),
);
return {
tenantCode: deployConfig.tenantCode,
environment: deployConfig.environment,
appConfig,
apiClient,
authClient,
};
},
```
