diff --git a/agenta-web/README.md b/agenta-web/README.md index 97ae519f3e..56a3ab457e 100644 --- a/agenta-web/README.md +++ b/agenta-web/README.md @@ -104,10 +104,10 @@ agenta-web/src │ │ │ ├── Module2UIElement.tsx │ │ ├── components │ │ │ ├── ModuleComponent1.tsx -│ │ ├── hooks +│ ├── hooks │ │ │ ├── useModuleHook1.ts -│ │ ├── Module.tsx -│ │ ├── types.d.ts +│ ├── Module.tsx +│ ├── types.d.ts └── global.d.ts ``` @@ -176,3 +176,80 @@ This structure supports: - Identification of reusable patterns - Natural code organization based on usage - Scalable architecture that grows with the application + +### Data Fetching Best Practices + +We recommend using SWR with Axios for data fetching instead of useEffect patterns. This helps achieve cleaner code while simplifying management of fetch states. + +#### Example: Converting useEffect Data Fetching to SWR with Axios + +❌ **Avoid this pattern:** + +```javascript +useEffect(() => { + fetchData1().then(data1 => { + setData1(data1); + }).catch(error => { + setError1(error); + }); + + fetchData2().then(data2 => { + setData2(data2); + }).catch(error => { + setError2(error); + }); +}, []); +``` + +✅ **Use this pattern:** + +We configure SWR globally with our pre-configured Axios instance: + +```javascript +// src/utils/swrConfig.js +import axios from '@/lib/helpers/axios'; +import useSWR from 'swr'; + +const fetcher = url => axios.get(url).then(res => res.data); + +export const swrConfig = { + fetcher, +}; +``` + +To ensure SWR configuration is applied globally, wrap your application with SWRConfig in `_app.tsx`: + +```javascript +// src/pages/_app.tsx +import { SWRConfig } from 'swr'; +import { swrConfig } from '../utils/swrConfig'; + +function MyApp({ Component, pageProps }) { + return ( + + + + ); +} + +export default MyApp; +``` + +```javascript +import useSWR from 'swr'; + +function Component() { + const { data: data1, error: error1, loading: loadingData1 } = useSWR('/api/data1'); + const { data: data2, error: error2, loading: loadingData2 } = useSWR('/api/data2'); + + if (error1 || error2) return
Error loading data
; + if (!data1 || !data2) return
Loading...
; + + return ( +
+
Data 1: {data1}
+
Data 2: {data2}
+
+ ); +} +```