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 (
  
    
    ...
    ...
  
  
 );
    ...
    ...
  
   })
};