Unable to set QueryClientProvider

[JohnathanChan-DBB]

"Uncaught Error: No QueryClient set, use QueryClientProvider to set one"

the above error was shown when I was trying to call a hook inside a child component of a stage. I've tried to wrap the stage with a QueryClientProvider as shown below

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Stage, Container } from "@pixi/react";
import MyPixiComponent from "./MyPixiComponent";

const queryClient = new QueryClient();

export default function CanvasContainer({ width, height }) {

return
 < QueryClientProvider client={queryClient}>
      < Stage  width={width}
          height={height}
          eventmode="static"
          options={{ background: COLOR_CANVAS_BG }}>
     < Container>
            <...some child component renders/>
     </ Container>
      </ Stage>
    </ QueryClientProvider>
}

however i would still receive the error where the QueryClient is not set. is there any other solutions or am I doing something not allowed here?

edit: didn't know that my code was being obscured

[trezy]

It's hard to know for sure what's happening here. From the code you provided, it looks like this is a question for the React Query folx. If you could throw together a minimal reproduction in Codesandbox, I'd be happy to verify whether there's an issue in PixiJS React, though.

[JohnathanChan-DBB]

hey sorry bout that for some reason github obscured part of my code and i didn't realize it

[JohnathanChan-DBB]

so i was working on this issue and manage to find a solution (though im not too sure how or why this works)
apparently i had to wrap the QueryClientProvider around the child component renders like so:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Stage, Container } from "@pixi/react";
import MyPixiComponent from "./MyPixiComponent";

const queryClient = new QueryClient();

export default function CanvasContainer({ width, height }) {

return
 
      < Stage  width={width}
          height={height}
          eventmode="static"
          options={{ background: COLOR_CANVAS_BG }}>
     < Container>
         < QueryClientProvider client={queryClient}>
               <...some child component renders/>
         </ QueryClientProvider>
     </ Container>
      </ Stage>
    
}

if there's anyone who might know why this works i would be glad to learn about it :D
many thanks

[trezy]

I didn't realize that you were using PixiJS React v7 in your original question. You likely need to set up the ContextBridge to be able to pass your context across the application boundary.