Frontend Integration

1npm install wappi-fe

1import { WappiClient } from 'wappi-fe'
2
3const client = new WappiClient({
4  baseURL: 'http://localhost:3000',
5  timeout: 5000
6})
7
8// In your React component
9function UsersList() {
10  const [users, setUsers] = useState([])
11  
12  useEffect(() => {
13    client.get('/users')
14      .then(response => setUsers(response.data.users))
15      .catch(error => console.error(error))
16  }, [])
17  
18  return (
19    <div>
20      {users.map(user => (
21        <div key={user.id}>{user.name}</div>
22      ))}
23    </div>
24  )
25}

1import { WappiClient } from 'wappi-fe'
2
3const client = new WappiClient({
4  baseURL: process.env.VUE_APP_API_URL
5})
6
7export default {
8  data() {
9    return {
10      users: []
11    }
12  },
13  async mounted() {
14    try {
15      const response = await client.get('/users')
16      this.users = response.data.users
17    } catch (error) {
18      console.error(error)
19    }
20  }
21}

1interface User {
2  id: string
3  name: string
4  email: string
5}
6
7interface ApiResponse<T> {
8  data: T
9  message: string
10}
11
12const response = await client.get<ApiResponse<User[]>>('/users')
13// response.data is fully typed

1client.interceptors.request.use((config) => {
2  const token = localStorage.getItem('token')
3  if (token) {
4    config.headers.Authorization = `Bearer ${token}`
5  }
6  return config
7})

1client.interceptors.response.use(
2  (response) => response,
3  (error) => {
4    if (error.response?.status === 401) {
5      // Handle unauthorized access
6      window.location.href = '/login'
7    }
8    return Promise.reject(error)
9  }
10)

1import { WappiSocket } from 'wappi-fe'
2
3const socket = new WappiSocket('ws://localhost:3000')
4
5socket.on('user:created', (user) => {
6  console.log('New user created:', user)
7})
8
9socket.emit('join:room', { roomId: 'users' })