potent heron
Hey there, do you guys have an example of using the Nodejs convex client in a react app and using it with clerk?
I'm trying a different approach to calling convex queries (I wanted to use it without using hooks). I setup a convexClient and made my calls. The only problem was setting auth. I saw this https://docs.convex.dev/api/classes/browser.ConvexClient#setauth, but not sure how to set it with clerk.
I'll be tinkering but if you guys have an example, please lmk.
azure cloak
@potent heron heads up that you can use the React client without using hooks, in case that's relevant. The client object normally passed into the ConvexProvider component can be used standalone.
Are you stil using React for Clerk? You'll need to get a Convex-formatted JWT from Clerk somehow and most of their examples use React.
potent heron
yeah I'm still using React for clerk. Oh, I didn't I could just grab it out of the ConvexProvider.
azure cloak
The way setAuth works in both the Node.js-focused ConvexClient and the ConvexReactClient client is that setAuth() takes an async function which fetches this JWT
an async function returning the JWT-encoded OpenID Connect Identity Token
If you're still using React you could use the example Providers
<ClerkProvider publishableKey="pk_test_...">
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
<App />
but use the useConvex() hook to grab the convex client, or just save a global reference to the client
that way you don't need to write the logic to wait for Clerk to be authed and wait for Convex to acknowledge receiving the auth
If you're using subscriptions without hooks you'll need to write your own unsubscribe logic (since normally unsubscribe happens on unmount with hooks like useQuery()) but otherwise using the methods directly on the client should be straightforward
It's quite reasonable to use Convex without the React hooks, but I'd love to hear what your motivation is in case there's something we could do to improve the React bindings.
potent heron
Thanks Tom! I'll give this a shot 🙏
My motivation was to use something like Zustand & convex
I like to try and separate my frontend (components), state (zustand) and clients (convex). I was playing around with bundling up convex & zustand.
It might not be the best pattern but it was something I was experimenting with
azure cloak
Would love to hear how it goes, this shouldn't be too much code to hook up. If you want an example check out https://github.com/get-convex/convex-js/blob/main/src/react/client.ts#L497, you probably don't need the batching though if you're not using React 17.