|
| 1 | +--- |
| 2 | +title: "Data Fetching in Fireact.dev" |
| 3 | +linkTitle: "Data Fetching" |
| 4 | +weight: 3 |
| 5 | +description: > |
| 6 | + Understand how data is fetched and managed in Fireact.dev applications using hooks and providers. |
| 7 | +--- |
| 8 | + |
| 9 | +Fireact.dev applications leverage a set of powerful React hooks and context providers to simplify data fetching and state management, especially for common application concerns like authentication, configuration, loading states, and subscription details. These components abstract away much of the complexity of interacting with Firebase and Stripe, allowing you to focus on building your application's unique features. |
| 10 | + |
| 11 | +### Core Data Fetching Hooks and Providers: |
| 12 | + |
| 13 | +The framework provides dedicated hooks that give you access to specific data and functionalities. These hooks typically rely on corresponding Context Providers that wrap your application's components, making the data available down the component tree. |
| 14 | + |
| 15 | +1. **Authentication Data (`useAuth` and `AuthProvider`)**: |
| 16 | + * **`AuthProvider`**: This provider wraps your application (or parts of it) to make authentication-related data and functions available. It initializes Firebase Authentication and manages the user's authentication state. |
| 17 | + * **`useAuth` Hook**: Use this hook to access the current user's authentication status, user object (e.g., `user.uid`, `user.email`), and authentication-related functions (e.g., `signIn`, `signOut`). |
| 18 | + * **Example Usage**: |
| 19 | + ```typescript |
| 20 | + import { useAuth } from '@fireact.dev/app'; |
| 21 | + |
| 22 | + function MyComponent() { |
| 23 | + const { user, loading, error } = useAuth(); |
| 24 | + |
| 25 | + if (loading) return <div>Loading authentication...</div>; |
| 26 | + if (error) return <div>Error: {error.message}</div>; |
| 27 | + |
| 28 | + return ( |
| 29 | + <div> |
| 30 | + {user ? `Welcome, ${user.email}` : 'Please sign in.'} |
| 31 | + </div> |
| 32 | + ); |
| 33 | + } |
| 34 | + ``` |
| 35 | + * For more details, refer to the [`useAuth` documentation](../app/hooks/useAuth.md) and [`AuthContext` documentation](../app/contexts/AuthContext.md). |
| 36 | + |
| 37 | +2. **Application Configuration (`useConfig` and `ConfigProvider`)**: |
| 38 | + * **`ConfigProvider`**: This provider makes your application's global configuration (from `firebase.config.json`, `app.config.json`, `stripe.config.json`) accessible throughout your application. |
| 39 | + * **`useConfig` Hook**: Allows you to retrieve configuration values, such as page routes, Stripe plan details, and other application-wide settings. |
| 40 | + * **Example Usage**: |
| 41 | + ```typescript |
| 42 | + import { useConfig } from '@fireact.dev/app'; |
| 43 | +
|
| 44 | + function MyComponent() { |
| 45 | + const config = useConfig(); |
| 46 | + const homePagePath = config.appConfig.pages.home; |
| 47 | + // ... use homePagePath for navigation or other purposes |
| 48 | + return <div>...</div>; |
| 49 | + } |
| 50 | + ``` |
| 51 | + * For more details, refer to the [`useConfig` documentation](../app/hooks/useConfig.md) and [`ConfigContext` documentation](../app/contexts/ConfigContext.md). |
| 52 | + |
| 53 | +3. **Loading States (`useLoading` and `LoadingProvider`)**: |
| 54 | + * **`LoadingProvider`**: Manages a global loading state for your application, useful for indicating ongoing asynchronous operations. |
| 55 | + * **`useLoading` Hook**: Provides access to the global loading state and functions to set it. |
| 56 | + * For more details, refer to the [`useLoading` documentation](../app/hooks/useLoading.md) and [`LoadingContext` documentation](../app/contexts/LoadingContext.md). |
| 57 | + |
| 58 | +4. **Subscription Details (`useSubscription`, `useSubscriptionInvoices` and `SubscriptionProvider`)**: |
| 59 | + * **`SubscriptionProvider`**: This provider makes subscription-related data available to its children. It fetches and manages the current user's subscription details. |
| 60 | + * **`useSubscription` Hook**: Provides access to the current user's subscription object, including its status, plan ID, and settings. This is crucial for rendering subscription-gated content. |
| 61 | + * **`useSubscriptionInvoices` Hook**: Fetches a list of invoices associated with the user's subscription. |
| 62 | + * **Example Usage (`SubscriptionDashboard.tsx`)**: |
| 63 | + ```typescript |
| 64 | + import { useSubscription } from '@fireact.dev/app'; |
| 65 | +
|
| 66 | + export default function SubscriptionDashboard() { |
| 67 | + const { subscription, loading, error } = useSubscription(); |
| 68 | +
|
| 69 | + if (loading) { |
| 70 | + return <div>Loading subscription...</div>; |
| 71 | + } |
| 72 | +
|
| 73 | + if (error || !subscription) { |
| 74 | + return <div>No active subscription found or an error occurred.</div>; |
| 75 | + } |
| 76 | +
|
| 77 | + return ( |
| 78 | + <div> |
| 79 | + <h2>Subscription: {subscription.settings?.name}</h2> |
| 80 | + <p>Status: {subscription.status}</p> |
| 81 | + </div> |
| 82 | + ); |
| 83 | + } |
| 84 | + ``` |
| 85 | + * For more details, refer to the [`useSubscription` documentation](../app/hooks/useSubscription.md), [`useSubscriptionInvoices` documentation](../app/hooks/useSubscriptionInvoices.md) and [`SubscriptionContext` documentation](../app/contexts/SubscriptionContext.md). |
| 86 | + |
| 87 | +### General Data Fetching Patterns: |
| 88 | + |
| 89 | +* **Conditional Rendering**: Always handle `loading` and `error` states when using data-fetching hooks. Display loading indicators or error messages as appropriate. |
| 90 | +* **Data Availability**: Ensure that the necessary providers (`AuthProvider`, `ConfigProvider`, `SubscriptionProvider`, etc.) are wrapping the components that rely on their respective hooks. The `App.tsx` file typically sets up these top-level providers. |
| 91 | +* **Custom Data**: For data not covered by the built-in hooks, you can implement your own data fetching logic using standard React patterns (e.g., `useState`, `useEffect`) and interact directly with Firebase SDKs or other APIs. |
| 92 | + |
| 93 | +By understanding and utilizing these hooks and providers, you can efficiently manage data flow and build dynamic, responsive applications with Fireact.dev. |
0 commit comments