protestant-coral

ClerkProvider + QueryClientProvider doesn't work?

I was following the start-clerk) repo and wanted to add React query to it as well but noticed that they don't mesh together well. I have the following:

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()({
 ...
  beforeLoad: async () => {
    const { user } = await fetchClerkAuth();

    return {
      user,
    };
  },
  errorComponent: (props) => {
    return (
      <RootDocument>
        <DefaultCatchBoundary {...props} />
      </RootDocument>
    );
  },
  notFoundComponent: () => <NotFound />,

  component: RootComponent,
});

function RootComponent() {
  return (
    <ClerkProvider>
      <QueryClientProvider client={queryClient}>
        <RootDocument>
          <Layout>
            <Outlet />
          </Layout>
          {/* <TanStackRouterDevtools position="bottom-right" />
                <ReactQueryDevtools buttonPosition="top-right" /> */}
        </RootDocument>
      </QueryClientProvider>
    </ClerkProvider>
  );
}

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()({
 ...
  beforeLoad: async () => {
    const { user } = await fetchClerkAuth();

    return {
      user,
    };
  },
  errorComponent: (props) => {
    return (
      <RootDocument>
        <DefaultCatchBoundary {...props} />
      </RootDocument>
    );
  },
  notFoundComponent: () => <NotFound />,

  component: RootComponent,
});

function RootComponent() {
  return (
    <ClerkProvider>
      <QueryClientProvider client={queryClient}>
        <RootDocument>
          <Layout>
            <Outlet />
          </Layout>
          {/* <TanStackRouterDevtools position="bottom-right" />
                <ReactQueryDevtools buttonPosition="top-right" /> */}
        </RootDocument>
      </QueryClientProvider>
    </ClerkProvider>
  );
}

And i get this error:

TypeError: Cannot read properties of undefined (reading 'addChildren')

TypeError: Cannot read properties of undefined (reading 'addChildren')

React TanStack Router Start Clerk Basic) Example | TanStack Router ...

An example showing how to implement Start Clerk Basic) in React using TanStack Router.

6 Replies

protestant-coralOP•13mo ago

I noticed i can do it in a different way :check:

manual-pink•13mo ago

hey, can you share what the other way was? I am having the same issue.

conscious-sapphire•13mo ago

Your providers can be wrapped using the Wrap option on the router.

const createRouter = () => {
  const router = createTanStackRouter({
  // ...
  Wrap: function ({ children }) {
    return <SomeProvider>{children}</SomeProvider>
  }
})
}

const createRouter = () => {
  const router = createTanStackRouter({
  // ...
  Wrap: function ({ children }) {
    return <SomeProvider>{children}</SomeProvider>
  }
})
}

Probably something like this was used.

manual-pink•12mo ago

You can’t put the Clerk Provider in there, it needs to be in a route

conscious-sapphire•12mo ago

Have you looked at the clerk example? https://github.com/tanstack/router/tree/main/examples/react/start-clerk-basic

GitHub

router/examples/react/start-clerk-basic at main · TanStack/router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

conscious-sapphire•12mo ago

You could use it for wrapping Clerk at the RootComponent, whilst doing the react-router-with-query to wrap the app. https://github.com/TanStack/router/blob/5f791faae8d4a60130dcdb49d4030b716c015804/examples/react/start-basic-react-query/app/router.tsx#L3-L25

GitHub

router/examples/react/start-basic-react-query/app/router.tsx at 5f7...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

Gaming

Programming

ClerkProvider + QueryClientProvider doesn't work?

Did you find this page helpful?