SolidJS•2mo ago

Cache with sanity

Hi everyone I'm using cache to request my sanity data, but who I can "forgot" the cache when update something on the sanity?

8 Replies

Daniel Sousa @TutoDSOP•2mo ago

Can I remove the cache and keep using it on createAsync?

const getTotalOfProjects = cache(async (serviceSlug?: string): Promise<number> => {
  try {
    let total = 0;

    if (serviceSlug) {
      total = await client.fetch<number>(getTotalOfProjectsFromServiceQuery, {
        serviceSlug,
      });
    } else {
      total = await client.fetch<number>(getTotalOfProjectsQuery);
    }

    return total;
  } catch {
    return 0;
  }
}, 'total-projects');

const getTotalOfProjects = cache(async (serviceSlug?: string): Promise<number> => {
  try {
    let total = 0;

    if (serviceSlug) {
      total = await client.fetch<number>(getTotalOfProjectsFromServiceQuery, {
        serviceSlug,
      });
    } else {
      total = await client.fetch<number>(getTotalOfProjectsQuery);
    }

    return total;
  } catch {
    return 0;
  }
}, 'total-projects');

Madaxen86•2mo ago

The cache function of @solid/router will only cache the request results for 5 seconds. After 5 seconds the data will be fetched from the source again if the page is refreshed or revisited by navigation. It’s just for deduplication of simultaneous requests from different components.

Daniel Sousa @TutoDSOP•2mo ago

Sorry back to this But I have this behavior I update the content on sanity And if I refresh the page the content don’t change I need to switch between pages For example today I open on my mobile device and the content is the older one when I update the content 3 days ago. Only after switch between pages changes

Madaxen86•2mo ago

Well your phone does not reload the page but shows a cached version of it until you switch routes or reload the page. Some browsers even cache during a reload. iOS Safari for example.

Daniel Sousa @TutoDSOP•2mo ago

But any suggestion to avoid users seeing hold content?

Madaxen86•2mo ago

In one of my projects I added this:

onMount(() => {
    function refreshWhenVisible() {
      if (!document.hidden && isAuthenticated()) {
        revalidate(getIsAuthenticated.key);
      }
    }
    document.addEventListener("visibilitychange", refreshWhenVisible);

    onCleanup(() => {
      document.removeEventListener("visibilitychange", refreshWhenVisible);
     
    });
  });

onMount(() => {
    function refreshWhenVisible() {
      if (!document.hidden && isAuthenticated()) {
        revalidate(getIsAuthenticated.key);
      }
    }
    document.addEventListener("visibilitychange", refreshWhenVisible);

    onCleanup(() => {
      document.removeEventListener("visibilitychange", refreshWhenVisible);
     
    });
  });

This will revalidate the cached function whenever a user revisits the page. So on desktop it would even fire when the user switches to another tab and comes back. Of course this increases the traffic. Have you set any caching headers? Like max-age or Cache-Control: no-cache

Daniel Sousa @TutoDSOP•2mo ago

No, this a sanity cms project, not an api I use the client to get the content Sorry for the noob question, if I leave the website open for a few hours and back there and switch to another page I receive a client unexpected error Any idea? But refreshing the page everything seems ok again

Madaxen86•2mo ago

Did you publish a new frontend version in the meantime? Because then the router would try to get assets (scripts) which are not available after e new build.

Gaming

Programming

Cache with sanity