Integrating Booker atom in Formbricks throws Error: No QueryClient set, use QueryClientProvider to set one

[DeepaPrasanna]

Hello cal team, I am trying to replace cal embed with cal booker atom. But, there is an error that is popping up No QueryClient set, use QueryClientProvider to set one. Even after wrapping up my booker atom with QueryClientProvider the issue still persists. I am wondering if I am missing something.

Please let me know if i need to provide additional info. Appreciating any help. Thank you!

[dosubot[bot]]

Hello @DeepaPrasanna! I'm here to help you with any technical issues you're facing. Let's get to the bottom of this together.

The error message "No QueryClient set, use QueryClientProvider to set one" typically indicates that the QueryClientProvider is not correctly set up or the QueryClient instance is not being passed properly. Here are a few steps to troubleshoot and resolve this issue:

1. Ensure Correct Setup: Make sure that the QueryClientProvider is correctly wrapping the component tree where the booker atom is used. The QueryClientProvider should be at a higher level in the component hierarchy than any components that use React Query hooks.

2. Check QueryClient Instance: Verify that you are creating a QueryClient instance and passing it to the QueryClientProvider. It should look something like this:

   import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
   
   const queryClient = new QueryClient();
   
   function App() {
     return (
       <QueryClientProvider client={queryClient}>
         <YourComponent />
       </QueryClientProvider>
     );
   }

3. Verify Component Hierarchy: Double-check that the QueryClientProvider is not being inadvertently unmounted or that the component using the booker atom is not outside its scope.

4. Dependencies: Ensure that all necessary dependencies, especially @tanstack/react-query, are correctly installed and up to date.

If these steps do not resolve the issue, consider providing more details about how the QueryClientProvider is integrated into your component tree, as there might be specific nuances in your setup that need addressing.

To continue talking to Dosu, mention @dosu.

Written by @dosu, approved by dosu-customer-success