Persistent localStorage cache with SWR

Joshua Rodriguez — Sun, 22 Jan 2023 01:07:32 +0000

None of the current tutorials on the web actually worked for me, after some hours of investigation I created this hook

The only dependencies are "usehooks-ts" (just for commodity) and "swr" itself

import { useLocalStorage, useEventListener } from "usehooks-ts";
import { useSWRConfig } from "swr";
import { useEffect } from "react";

export const useSWRCache = () => {
  const [swrCache, setSWRCache] = useLocalStorage("swrcache", "{}");
  const parsedSWRCache = JSON.parse(swrCache) as object;
  const { cache, mutate } = useSWRConfig();

  useEffect(() => {
    Object.entries(parsedSWRCache).forEach(([key, value]) => {
      if (!value) return;
      cache.set(key, value);
    });

    // @ts-ignore
    for (const key of cache.keys()) {
      mutate(key);
    }
  });

  useEventListener("beforeunload", () => {
    const newCache: any = {};

    // @ts-ignore
    for (const key of cache.keys()) {
      newCache[key] = cache.get(key);
    }

    setSWRCache(JSON.stringify(newCache));
  });
};

This will save the cache on the localStorage when the "beforeunload" event is triggered (every time an user closes the tab, or reloads the page)

And then it will reload the cached keys from the localStorage once the page is loaded with useEffect

To use it you only need to place it in the main App.tsx or _app.tsx (Next.js) components

Like this:

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  useSWRCache();

...

"ConnectionError [SequelizeConnectionError]: no pg_hba.conf entry for host..." in Heroku Postgresql using Sequelize

Joshua Rodriguez — Sat, 31 Dec 2022 03:15:47 +0000

The code I was using while I got this error was:

sequelize = new Sequelize(process.env.DATABASE_URL);

Now, Heroku requires SSL to be enabled according to this quote from Heroku's Help Site

The authentication failed because the connection didn't use SSL encryption: (SSL off). All Heroku Postgres production databases require using SSL connections to ensure that communications between applications and the database remain secure. If your client is not using SSL to connect to your database, you would see these errors even if you're using the right credentials to connect to it.

My code changed accordingly to solve the error and now looks like this:

    sequelize = new Sequelize(process.env.DATABASE_URL, {
      dialectOptions: {
        ssl: {
          require: true,
          rejectUnauthorized: false,
        },
      },
    });

DEV Community: Joshua Rodriguez

Persistent localStorage cache with SWR

"ConnectionError [SequelizeConnectionError]: no pg_hba.conf entry for host..." in Heroku Postgresql using Sequelize