1. How does it work?

SWR has been configured in the folder:app/api/globalFetcher.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 (
  

      ...
      ...
                                  
  
   );

     ...
     ...

   })
 };