T
TanStack•5mo ago
optimistic-gold

Passing hook result into context w/ Tanstack Start

In Tanstack Router, using a classic SPA setup, you can do this: 
const router = createRouter({
  routeTree,
  context: {
    auth: undefined!, // This will be set after we wrap the app in an Provider
    client: undefined!, //  This will be set after we wrap the app in an Provider
    reactQueryClient: undefined!, //  This will be set after we wrap the app in an Provider
  },
});

const InnerApp = () => {
  const auth = useAuth();
  const client = useClient();
  const reactQueryClient = useQueryClient();
  useAdminFunctions();

  return <RouterProvider router={router} context={{ auth, client, reactQueryClient }} />;
};

const rootElement = document.getElementById("app")!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
      <React.StrictMode>
            <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
              <ClerkLoaded>
                <GraphqlProvider>
                  <QueryClientProvider client={queryClient}>
                    <InnerApp />
                  </QueryClientProvider>
                </GraphqlProvider>
              </ClerkLoaded>
            </ClerkProvider>
      </React.StrictMode>
    );
}
const router = createRouter({
  routeTree,
  context: {
    auth: undefined!, // This will be set after we wrap the app in an Provider
    client: undefined!, //  This will be set after we wrap the app in an Provider
    reactQueryClient: undefined!, //  This will be set after we wrap the app in an Provider
  },
});

const InnerApp = () => {
  const auth = useAuth();
  const client = useClient();
  const reactQueryClient = useQueryClient();
  useAdminFunctions();

  return <RouterProvider router={router} context={{ auth, client, reactQueryClient }} />;
};

const rootElement = document.getElementById("app")!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
      <React.StrictMode>
            <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
              <ClerkLoaded>
                <GraphqlProvider>
                  <QueryClientProvider client={queryClient}>
                    <InnerApp />
                  </QueryClientProvider>
                </GraphqlProvider>
              </ClerkLoaded>
            </ClerkProvider>
      </React.StrictMode>
    );
}
I'm trying to port this functionality to Start. I want to re-use the URQL client created in the Graphql provider and pass it into the context, so it can be used in beforeLoad etc, but atm it is only exposed via a hook. Is there a recommended way to handle this case?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?