Could not find ConvexClient in Next.js

So I have something like this: _app.tsx

<ClerkProvider publishableKey={env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
        <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
<Component />
</ConvexProviderWithClerk>
</ClerkProvider>

<ClerkProvider publishableKey={env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
        <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
<Component />
</ConvexProviderWithClerk>
</ClerkProvider>

parentComponent.tsx

const Layout = ({children}) => {
 const updateNode = useMutation(api.nodes.updateTextNode);

//---stuff---

return (
{children}
)
}

const Layout = ({children}) => {
 const updateNode = useMutation(api.nodes.updateTextNode);

//---stuff---

return (
{children}
)
}

OtherComponent.tsx

const Other= ()=>{
return (
<Layout>
<Child />
</Layout>
)
}

const Other= ()=>{
return (
<Layout>
<Child />
</Layout>
)
}

Child.tsx

const Child= ()=>{
 const updateNode = useMutation(api.nodes.updateTextNode);

//rest of the component
}

const Child= ()=>{
 const updateNode = useMutation(api.nodes.updateTextNode);

//rest of the component
}

I get

Error: Could not find Convex client! `useMutation` must be used in the React component tree under `ConvexProvider`. Did you forget it?

Error: Could not find Convex client! `useMutation` must be used in the React component tree under `ConvexProvider`. Did you forget it?

if I add the useMutation hook in the child

6 Replies

ballingt•2y ago

Is this App Router Next.js, in the app directory?

star ✨OP•2y ago

Nope, pages for both the threads im in - its pages

ballingt•2y ago

Any interesting React libraries you're using, like react-three-fiber? One issue we've seen is context not working between different React renderers, so any library that uses a custom React renderer needs more setup. Also curious if passing the call ack down works, if so sounds like there's some context barrier in the react tree or some different way that useMutation is being imported

star ✨OP•2y ago

YES i passed a callback function down and that worked for me yes

ballingt•2y ago

Alright, this is a React issue. https://github.com/pmndrs/react-three-fiber/issues/262 You can use useConvex() to grab the convex client from a parent and then use another ConvexProvider inside the Canvas component, they call this a "bridge" in these issues. Like

const client = useConvex()
return (
  <Canvas>
    <ConvexProvider client={client}>
      <YourStuff />
    ...

const client = useConvex()
return (
  <Canvas>
    <ConvexProvider client={client}>
      <YourStuff />
    ...

GitHub

Using context inside child elements of Canvas · Issue #262 · pmndrs...

Hi, 👋 I wanted to create a simple "store" for my app with createContext. Unexpectedly, I found out that I can't access my context within the Canvas element. const StateContext = creat...

star ✨OP•2y ago

👀 That was VERY helpful thank you very much Tom the reason i didnt do this right away was that parent component i was talking about is INSIDE the canvas already so if it works there already it was weird it wudnt work on any of its children

Could not find ConvexClient in Next.js

Did you find this page helpful?