Has anyone been able to use the new Experimental ably-js react hooks?

Question

Problem: I encounter a "Unhandled Promise Rejection: Error: Connection closed" every time I attempt to use useChannel or usePresence. This is being done in a client component (app router), and the component is the child of a layout with AblyProvider.

This is the error I received.

I do know this is experimental, but I just wanted to make sure it isn't just me and the hooks are working just fine.

What I tried:

1. Passing a client ID to the AblyProvider
2. Passing a client ID to each instance of a useChannel or usePresence hook
3. Using the provider in a layout
4. Using the provider in a component that just wraps the client component I want to use the hooks in
5. Cry a lot

Answer 1

So, I solved it myself. For those who come across this later:

It works if you create your own Ably client and pass it in to the provider.

import { AblyProvider } from "ably/react";
import * as Ably from "ably";

const client = new Ably.Realtime.Promise({ key: "your-ably-api-key", clientId: 'me' });

root.render(
  <AblyProvider client={client}>
    <App />
  </AblyProvider>
)