In React Check If Page Has Refreshed Then Set Localstorage Off Of Graphql Query Otherwise Keep Current Local Storage For State

I am attempting to build a hit counter that is based off of a user click. It increments the counter each time the user clicks. I am running GatsbyJS with react. I am using a lambd

Solution 1:

Have you tried setting a function for after the query completes?

const { loading, data } = useQuery(HIT_COUNTER, {
  onCompleted({ findHitCounterByID }) {
    window.localStorage.setItem('count', findHitCounterByID.amount);
  }
});

This should set the localStorage data to whatever the API response is after it is fetched. You may need to tweak it and other things in your code to make sure it only happens when you want it to. For that you can look at leveraging useLazyQuery and useEffect to call this query only when your component first mounts.

Something like this

const fetchHitCounter = useLazyQuery(HIT_COUNTER, {
  onCompleted({ findHitCounterByID }) {
    window.localStorage.setItem('count', findHitCounterByID.amount);
  }
});

useEffect(() => {
    fetchHitCounter();
}, []);

Solution 2:

I think the only problem you are having right now is detecting weather or not the page has been refreshed. So if you were able to detect a refresh you could take the appropriate action on the refresh for that i recommend you look at this question :

Detecting Refresh

So once you are able to detect the refresh you could then possibly add an indice in your storage that could indicate that and take the actions you want.