1. How does it work?

SWR has been configured in the folder: src/api/mocks/browser.ts

To use SWR on a page, you need to import it and make a call. After that, you need to make calls to swr using http.get('path') or http.post('path') see below implementation.

            
      
      import useSWR from 'swr';  // 1. import swr
      import { uniqueId } from 'lodash';
      import { sub } from 'date-fns';
      
      const API_URL = '/api/data/chat/ChatData';  // 2. change it to live service URL
      
      // Fetcher function using fetch API
      export const getFetcher = (url: string) =>
        fetch(url).then((res) => {
          if (!res.ok) {
            throw new Error('Failed to fetch data');
          }
          return res.json();
        });
      
      
      // 3. call to fetch data
      
      //fetch chat data using SWR
      export const useChats = () => {
        const { data, error } = useSWR(API_URL, getFetcher);
      
        return {
          data,
          error,
          isLoading: !data && !error,
        };
      };
      
      // use data in HTML
      {Object.keys(data).map((key, index) => {
          return (
            <React.Fragment key={index}>
              
            ...
            ...
            
            </React.Fragment>
              );
            ...
            ...
      
          })
      };