1. How does it work?

You can implement swr like this: src/app/context/ContactContext/index.tsx

            
      
      import useSWR from 'swr';
      import { uniqueId } from 'lodash';
      import { sub } from 'date-fns';
      import { getFetcher} from 'src/api/globalFetcher';
      
      // 3. call to fetch data
      const {data:contactsData,isLoading:isContactsLoading,error:contactsError,mutate} = useSWR('/api/data/contacts/contactsData',getFetcher);
      
      useEffect(() => {
        
        if(contactsData){
          const allContacts = contactsData.data;
          setContacts(allContacts);
          if(contacts.length===0){
            const initialStarredContacts = allContacts.filter((contact: { starred: any; }) => contact.starred).map((contact: { id: any; }) => contact.id);
            setStarredContacts(initialStarredContacts);
            setSelectedContact(allContacts[0]);
          }
      
        }else if(contactsError){
          setLoading(isContactsLoading);
          setError(contactsError);
        }else{
          setLoading(isContactsLoading);
        }
      
      }, [contactsData,contactsError]);
      
      // use data in HTML
      {Object.keys(data).map((key, index) => {
          return (
            <React.Fragment key={index}>
              
            ...
            ...
            
            </React.Fragment>
              );
            ...
            ...
      
          })
      };