Sync open source content 🐝 (from 581b5f4847acc2de8355da53f2fff94e16490bf3)

Author: beezythebot

docs/sdks/customize/typescript/react-hooks.mdx

@@ -164,28 +164,51 @@ The generated SDK with React Hooks has TanStack Query as a dependency that shoul
 The Speakeasy-generated TypeScript SDK bundles Zod for runtime type validation, and TanStack Query powers the React hooks. TanStack Query is required for the React hooks to function correctly.
 </Callout>
 
-### Set up the React Query provider
+### Set up the providers
 
-Add the TanStack Query provider to your React application:
+The generated React hooks require two providers to be set up in your application:
+
+1. **QueryClientProvider** from TanStack Query for managing query state
+2. **SDK Provider** from your generated SDK for providing the API client instance
+
+Add both providers to your React application:
 
 ```tsx
 import React from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 
-// Create a client
+// Import the SDK core class and provider from your generated SDK
+import { YourSDKCore } from "your-sdk-package";
+import { YourSDKProvider } from "your-sdk-package/react-query";
+
+// Create a TanStack Query client
 const queryClient = new QueryClient();
 
+// Create an instance of your SDK with any required configuration
+const sdkClient = new YourSDKCore({
+  // Add your SDK configuration here, such as:
+  // apiKey: process.env.API_KEY,
+});
+
+// Optionally disable TanStack Query's built-in retries since the SDK handles retries
+queryClient.setQueryDefaults(["your-sdk-package"], { retry: false });
+queryClient.setMutationDefaults(["your-sdk-package"], { retry: false });
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <App />
+      <YourSDKProvider client={sdkClient}>
+        <App />
+      </YourSDKProvider>
     </QueryClientProvider>
   </React.StrictMode>,
 );
 ```
 
+The SDK provider makes the API client available to all hooks in your component tree. Replace `your-sdk-package`, `YourSDKCore`, and `YourSDKProvider` with the actual names from your generated SDK.
+
 ## Basic usage
 
 You can use the generated Hooks in your components as follows: