I save product ids in a localstorage to be used in recently viewed component.
My Recently viewed component is below

import { useQuery } from "@apollo/client";
import { getRecentlyViewedProductArr } from "@gb-utils/product/product"
import { RECENTLY_VIEWED } from "@gb-utils/queries/product";
import { useEffect, useState } from "react";


    export default function RecentlyViewed() {
    
        const [recentIds, setRecentIds] = useState([])
    
        const { loading, error, data } = useQuery(RECENTLY_VIEWED, {
            variables: { ids: recentIds }
        })
    
        useEffect(() => {
            setRecentIds(getRecentlyViewedProductArr())
        }, []);
    
        if (loading) {
            return 'Loading';
        }
    
        if (error) {
            return error.message
        }
    
        return (
            <div>{JSON.stringify(data)}</div>
        )
    }

My question is about how I use get the product from wp-graphql using userQuery with the local storage.

Currently I am defining a state to store product ids and on mount of the RecentlyViewed component I update the recentIds by getting the data from localstorage. Is there a better way of doing the code above because I feel like it fetching data from wp without or empty recentIds