.github/workflows/ci.yml

@@ -17,18 +17,19 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v3.0.0
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         with:
-          version: 8.x.x
+          run_install: false
 
-      - name: Set up Node
+      - name: Install Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: pnpm
+          cache: 'pnpm'
 
-      - name: Install Dependencies
-        run: pnpm install --frozen-lockfile
+      - name: Install dependencies
+        run: pnpm install
 
       - name: Start Supabase
         uses: nick-fields/retry@v3

.github/workflows/update-prs.yml

@@ -1,5 +1,8 @@
 name: Update stale PRs
-on: push
+on:
+  push:
+    branches:
+      - main
 
 jobs:
   update-prs:

.gitignore

@@ -27,4 +27,7 @@ yarn-error.log*
 .turbo
 
 # dist
-**/dist/
+**/dist/
+
+tsconfig.tsbuildinfo
+

.nvmrc

@@ -0,0 +1,2 @@
+22.14.0
+

README.md

@@ -49,7 +49,6 @@ The cache helpers are split up into reusable libraries.
 
 These are not meant for direct usage.
 
-- `jest-presets`: `jest` presets
 - `postgrest-core`: shared logic for [postgrest-js](https://github.com/supabase/postgrest-js)
 - `storage-core`: shared logic for [storage-js](https://github.com/supabase/storage-js) operations
 - `tsconfig`: `tsconfig.json`s used throughout the monorepo

docs/app/[[...mdxPath]]/page.jsx

@@ -0,0 +1,24 @@
+import { LinkedTabs } from '@/components/linked-tabs';
+import { generateStaticParamsFor, importPage } from 'nextra/pages';
+import { useMDXComponents as getMDXComponents } from '../../mdx-components';
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath');
+
+export async function generateMetadata(props) {
+  const params = await props.params;
+  const { metadata } = await importPage(params.mdxPath);
+  return metadata;
+}
+
+const Wrapper = getMDXComponents({ LinkedTabs }).wrapper;
+
+export default async function Page(props) {
+  const params = await props.params;
+  const result = await importPage(params.mdxPath);
+  const { default: MDXContent, toc, metadata } = result;
+  return (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  );
+}

docs/app/layout.jsx

@@ -0,0 +1,101 @@
+import { Footer, Layout, Navbar } from 'nextra-theme-docs';
+import { Banner, Head } from 'nextra/components';
+import { getPageMap } from 'nextra/page-map';
+import 'nextra-theme-docs/style.css';
+
+import { TabProvider } from '../components/tab-context';
+
+export const metadata = {
+  metadataBase: new URL('https://supabase-cache-helpers.vercel.app'),
+  title: {
+    default: 'Supabase Cache Helpers',
+    template: '%s – Supabase Cache Helpers',
+  },
+  description:
+    'A collection of framework specific Cache utilities for working with Supabase.',
+  applicationName: 'Supabase Cache Helpers',
+  generator: 'Next.js',
+  appleWebApp: {
+    title: 'Supabase Cache Helpers',
+  },
+  other: {
+    'msapplication-TileImage': '/ms-icon-144x144.png',
+    'msapplication-TileColor': '#fff',
+  },
+  openGraph: {
+    title: 'Supabase Cache Helpers',
+    description:
+      'A collection of framework specific Cache utilities for working with Supabase.',
+    url: 'https://supabase-cache-helpers.vercel.app',
+    siteName: 'Supabase Cache Helpers',
+    images: [
+      {
+        url: 'https://supabase-cache-helpers.vercel.app/og-image.png',
+        width: 1200,
+        height: 630,
+      },
+    ],
+    locale: 'en_US',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Supabase Cache Helpers',
+    description:
+      'A collection of framework specific Cache utilities for working with Supabase.',
+    images: ['https://supabase-cache-helpers.vercel.app/og-image.png'],
+    creator: '@psteinroe',
+    site: 'https://supabase-cache-helpers.vercel.app',
+  },
+};
+
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+};
+
+export default async function RootLayout({ children }) {
+  const navbar = <Navbar logo={<span>Supabase Cache Helpers</span>} />;
+  const pageMap = await getPageMap();
+  return (
+    <html lang="en" dir="ltr" suppressHydrationWarning>
+      <Head faviconGlyph="✦" />
+      <body>
+        <Layout
+          banner={
+            <Banner storageKey="hiring">
+              <a
+                href="https://twitter.com/psteinroe"
+                target="_blank"
+                rel="noreferrer"
+              >
+                🎉 We are hiring! You want to work on a large-scale Supabase
+                project? DM me →
+              </a>
+            </Banner>
+          }
+          navbar={navbar}
+          footer={
+            <Footer>
+              MIT {new Date().getFullYear()}
+              <a
+                href="https://supabase-cache-helpers.vercel.app"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {': '}
+                Supabase Cache Helpers
+              </a>
+            </Footer>
+          }
+          editLink="Edit this page on GitHub"
+          docsRepositoryBase="https://github.com/psteinroe/supabase-cache-helpers/blob/core/docs"
+          sidebar={{ defaultMenuCollapseLevel: 1 }}
+          pageMap={pageMap}
+        >
+          <TabProvider>{children}</TabProvider>
+        </Layout>
+      </body>
+    </html>
+  );
+}

docs/components/linked-tabs.jsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Tabs } from 'nextra/components';
+import React from 'react';
+import { useTabContext } from './tab-context';
+
+export const LinkedTabs = ({ id, items, children }) => {
+  const { selectedTabs, setSelectedTab } = useTabContext();
+  const selectedTab = selectedTabs[id] || items[0];
+
+  const index = items.indexOf(selectedTab);
+  const selectedIndex = index !== -1 ? index : 0;
+
+  return (
+    <Tabs
+      items={items}
+      selectedIndex={selectedIndex}
+      onChange={(index) => setSelectedTab(id, items[index])}
+    >
+      {children}
+    </Tabs>
+  );
+};

docs/components/tab-context.jsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+
+const TabContext = createContext({
+  selectedTabs: {},
+  setSelectedTab: () => {},
+});
+
+export const useTabContext = () => useContext(TabContext);
+
+export const TabProvider = ({ children }) => {
+  const [selectedTabs, setSelectedTabs] = useState({});
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const storedTabs = localStorage.getItem('selectedTabs');
+      if (storedTabs) {
+        try {
+          const parsedTabs = JSON.parse(storedTabs);
+          setSelectedTabs(parsedTabs);
+        } catch (error) {
+          console.error(
+            'Failed to parse selectedTabs from localStorage',
+            error,
+          );
+        }
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('selectedTabs', JSON.stringify(selectedTabs));
+    }
+  }, [selectedTabs]);
+
+  const setSelectedTab = (id, tab) => {
+    setSelectedTabs((prev) => ({
+      ...prev,
+      [id]: tab,
+    }));
+  };
+
+  return (
+    <TabContext.Provider value={{ selectedTabs, setSelectedTab }}>
+      {children}
+    </TabContext.Provider>
+  );
+};

docs/content/configuration.mdx

@@ -0,0 +1,51 @@
+import { Callout, Tabs } from 'nextra/components';
+import { LinkedTabs } from '@/components/linked-tabs';
+
+# Configuration
+
+Supabase Cache Helpers does a decent job at keeping your data up-to-date. This allows you to deviate from the standard configuration and reduce the number of requests to your backend while keeping your app fresh.
+
+<LinkedTabs items={['SWR', 'React Query']}
+  id="data-fetcher"
+>
+  <Tabs.Tab>
+    ```tsx
+    function Page() {
+      return (
+            <SWRConfig
+                value={{
+                    revalidateIfStale: false,
+                    revalidateOnFocus: false,
+                }}
+            >
+            ...
+            </SWRConfig>
+      )
+    }
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+  <Callout emoji="🔗">
+    You can find more details on the [React Query documentation](https://tanstack.com/query/latest/docs/framework/react/quick-start).
+  </Callout>
+    ```tsx
+    function Page() {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+            staleTime: Infinity,
+            gcTime: Infinity,
+          },
+        },
+      });
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          {/* Your components */}
+        </QueryClientProvider>
+      );
+    }
+```
+  </Tabs.Tab>
+</LinkedTabs>

docs/pages/postgrest/custom-cache-updates.mdx → docs/content/postgrest/custom-cache-updates.mdx

@@ -1,14 +1,19 @@
 import { Callout, Tabs } from 'nextra/components';
+import { LinkedTabs } from '@/components/linked-tabs';
 
 # Custom Cache Updates
 
 Sometimes, you will find yourself writing custom cache updates. The library exports two convenience hooks that expose the underlying cache operations.
 
+<Callout emoji="❗">
+  These hooks do not do any API requests. They only update the local cache.
+</Callout>
+
 ## `useDeleteItem`
 
 Delete a postgrest entity from the cache. Note that you have to pass a value for all primary keys in the input.
 
-<Tabs items={['SWR', 'React Query']}>
+<LinkedTabs items={['SWR', 'React Query']} id="data-fetcher">
   <Tabs.Tab>
     ```tsx
     import { useDeleteItem } from "@supabase-cache-helpers/postgrest-swr";
@@ -43,13 +48,13 @@ Delete a postgrest entity from the cache. Note that you have to pass a value for
     ```
 
   </Tabs.Tab>
-</Tabs>
+</LinkedTabs>
 
 ## `useUpsertItem`
 
 Upsert a postgrest entity into the cache. Note that you have to pass a value for all primary keys in the input.
 
-<Tabs items={['SWR', 'React Query']}>
+<LinkedTabs items={['SWR', 'React Query']} id="data-fetcher">
   <Tabs.Tab>
     ```tsx
     import { useUpsertItem } from "@supabase-cache-helpers/postgrest-swr";
@@ -84,4 +89,35 @@ Upsert a postgrest entity into the cache. Note that you have to pass a value for
     ```
 
   </Tabs.Tab>
-</Tabs>
+</LinkedTabs>
+
+## `useRevalidateTables`
+
+Revalidate all queries for the given tables.
+
+<LinkedTabs items={['SWR', 'React Query']} id="data-fetcher">
+  <Tabs.Tab>
+    ```tsx
+    import { useRevalidateTables } from "@supabase-cache-helpers/postgrest-swr";
+
+    function Page() {
+        const revalidateTables = useRevalidateTables([{ schema: 'public', table: 'contact' }]);
+
+      return <div>...</div>;
+    }
+    ```
+
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```tsx
+    import { useRevalidateTables } from "@supabase-cache-helpers/postgrest-react-query";
+
+    function Page() {
+        const revalidateTables = useRevalidateTables([{ schema: 'public', table: 'contact' }]);
+
+      return <div>...</div>;
+    }
+    ```
+
+  </Tabs.Tab>
+</LinkedTabs>