<!-- Source: https://www.wappi.dev/frontend-integration/examples -->

# Examples

Real-world examples of using wappi-fe in different scenarios and frameworks.

### Directly in React

```typescript
  useEffect(() => {
    if (!user) return; // Wait until the user object is available
    const authenticateUser = async () => {
      try {
        await request(WAPPI_CONFIG, {
          name: 'Core Login',
          query: 'Core_Login_2_0_0',
          data: { userAuth0Sub: user.sub },
          successCallback: (x) => {
            localStorage.removeItem('loginRedirectUrl')
            reduxDispatch(saveUserAndEnterDashboard(x as UserState));
            router.push(forwardToPath);
          },
          errorCallback: () => {
            toast({
              title: 'Error',
              description: 'We had trouble logging you in. Try again.',
              status: 'error',
              duration: 9000,
              isClosable: true,
            });
          },
        });
      } catch (error) {
        console.error(error);
      }
    };

    authenticateUser();
  }, [user, reduxDispatch, toast]);
```

## In a stand alone file

This allows you to create a /API folder and have a lot of reusable calls to your backend.

```typescript
import { request } from 'wappi-fe';
import { WAPPI_CONFIG } from './wappiConfig';

export const getAllProducts = async () => request(WAPPI_CONFIG, {
  name: 'Get Products',
  query: 'Products_GetAllProducts_3_2_12',
  data: {},
  authRequired: false,
  errorCallback: (e) => console.error(e.message),
});
```

```typescript
import { request } from 'wappi-fe';
import { WAPPI_CONFIG } from './wappiConfig';
import { User_UpdateUserDetails_2_4_9__Body } from './wappiTypes';

export const updateUserDetails = async (
  body: User_UpdateUserDetails_2_4_9__Body
) => request(WAPPI_CONFIG, {
  name: `Update ${body.userID} Details`,
  query: 'User_UpdateUserDetails_2_4_9',
  data: body,
  authRequired: true,
  errorCallback: (e) => console.error(e.message),
});

export const getUserDetails = async (
  reason: string
) => request(WAPPI_CONFIG, {
  // Uniqueness helps with observability. Ex: Showing user 456 for client 123 on listPage
  name: reason, 
  query: 'User_GetUserDetails_1_0_0',
  data: {},
  authRequired: true,
  errorCallback: (e) => console.error(e.message),
});
```

URL: https://www.wappi.dev/frontend-integration/examples