Setting Router Context with result of react hook

We are trying to migrate from tanstack-router to tanstack-start. Now we are facing some issues regarding the Router Context.
This is how we handled it using tanstack-router previously:

  const { api } = useApi();

  return (
    <RouterProvider
      router={router}
      context={{
        api:api
      }}
    />
  );

  const { api } = useApi();

  return (
    <RouterProvider
      router={router}
      context={{
        api:api
      }}
    />
  );

This enables us to use the api during the load function of routes like:

  loader: async ({
    context: { api },
  }) => {
    const result = await queryClient.ensureQueryData(
      queryOptionApiSearch(api)
    );
    return {
     result
    };
  },

  loader: async ({
    context: { api },
  }) => {
    const result = await queryClient.ensureQueryData(
      queryOptionApiSearch(api)
    );
    return {
     result
    };
  },

The problem now is that with tanstack-start we see no option to manually set the <RouterProvider /> ourselves since its being set interally by <StartClient />

Is there any way to get this working? Or do we have to change the way we are using the api?

TanStack•4mo ago•

8 replies

ordinary-sapphire

Setting Router Context with result of react hook

We are trying to migrate from tanstack-router to tanstack-start. Now we are facing some issues regarding the Router Context.
This is how we handled it using tanstack-router previously:

  const { api } = useApi();

  return (
    <RouterProvider
      router={router}
      context={{
        api:api
      }}
    />
  );

  const { api } = useApi();

  return (
    <RouterProvider
      router={router}
      context={{
        api:api
      }}
    />
  );

This enables us to use the api during the load function of routes like:

  loader: async ({
    context: { api },
  }) => {
    const result = await queryClient.ensureQueryData(
      queryOptionApiSearch(api)
    );
    return {
     result
    };
  },

  loader: async ({
    context: { api },
  }) => {
    const result = await queryClient.ensureQueryData(
      queryOptionApiSearch(api)
    );
    return {
     result
    };
  },

Setting Router Context with result of react hook

Similar Threads

Setting Router Context with result of react hook

Similar Threads

Similar Threads

Similar Threads