React `useProcedure` hook not compatible with `spacetimedb/tanstack`

[ferntheplant]

We had to do vile things to get it working

export default App() {
  const connectionBuilderTanstack = useMemo(() => {
    return DbConnection.builder()
      .withUri(HOST)
      .withDatabaseName(DB_NAME)
      .withToken(token ?? undefined)
      .onConnect(onConnect)
      .onDisconnect(onDisconnect)
      .onConnectError(onConnectError);
  }, [token]);
  const connectionBuilderReact = useMemo(() => {
    return DbConnection.builder()
      .withUri(HOST)
      .withDatabaseName(DB_NAME)
      .withToken(token ?? undefined)
      .onConnect(onConnect)
      .onDisconnect(onDisconnect)
      .onConnectError(onConnectError);
  }, [token]);

  return (
    <SpacetimeDBProviderTanstack connectionBuilder={connectionBuilderTanstack}>
      <SpacetimeDBProviderReact connectionBuilder={connectionBuilderReact}>
      <RouterProvider router={router} />
      <Toaster />
    </SpacetimeDBProviderReact>
    </SpacetimeDBProviderTanstack>
  );
}

Solution: either export a version useProcedure as part of spacetimedb/tanstack that is hooked up to the tanstack provider OR unify the spacetimedb/react and spacetimedb/tanstack providers

Related: Pull #4752 and Issue #4751

[bfops]

Hey @ferntheplant, you said you had to do vile things to get it working - does that mean that something like #4984 doesn't work for you?

[ferntheplant]

Hey @ferntheplant, you said you had to do vile things to get it working - does that mean that something like #4984 doesn't work for you?

Yea that's perfect. I was just being facetious about feeling gross with nesting 2 spacetimedb react providers - one for spacetimedb/react and one for spacetimedb/tanstack. This PR should work to let us remove the extra provider component since this newly exported useProcedure will be referencing the same provider as exported by spacetimedb/tanstack