Merge pull request #267 from psteinroe/fix/do-not-revalidate-on-mutate

fix/do not revalidate on mutate

.changeset/dull-coats-sniff.md

@@ -0,0 +1,5 @@
+---
+"@supabase-cache-helpers/postgrest-swr": patch
+---
+
+fix: do not revalidate on mutate by default

docs/pages/_meta.json

@@ -2,6 +2,7 @@
   "index": {
     "title": "Introduction"
   },
+  "configuration": "Configuration",
   "postgrest": "PostgREST",
   "storage": "Storage"
 }

docs/pages/configuration.mdx

@@ -0,0 +1,29 @@
+import { Callout, Tabs, Tab } from "nextra-theme-docs";
+import Link from "next/link";
+
+# 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.
+
+<Tabs items={['SWR', 'React Query']}>
+  <Tab>
+    ```tsx
+    function Page() {
+      return (
+            <SWRConfig
+                value={{
+                    revalidateIfStale: false,
+                    revalidateOnFocus: false,
+            >
+            ...
+            </SWRConfig>
+      )
+    }
+    ```
+  </Tab>
+  <Tab>
+    ```tsx
+    // TODO
+    ```
+  </Tab>
+</Tabs>

packages/postgrest-swr/__tests__/subscribe/use-subscription.integration.spec.tsx

@@ -37,11 +37,7 @@ describe('useSubscription', () => {
         client
           .from('contact')
           .select('id,username,ticket_number', { count: 'exact' })
-          .eq('username', USERNAME_1),
-        {
-          revalidateOnFocus: false,
-          revalidateOnReconnect: false,
-        }
+          .eq('username', USERNAME_1)
       );
 
       const [cbCalled, setCbCalled] = useState<boolean>(false);
@@ -56,14 +52,14 @@ describe('useSubscription', () => {
           filter: `username=eq.${USERNAME_1}`,
         },
         ['id'],
-        { callback: () => setCbCalled(true) }
+        { callback: () => setCbCalled(true), revalidate: true }
       );
 
+      const ticketNumber = Array.isArray(data) ? data[0]?.ticket_number : null;
+
       return (
         <div>
-          {(data ?? []).map((d) => (
-            <span key={d.id}>{`ticket_number: ${d.ticket_number}`}</span>
-          ))}
+          <span key={ticketNumber}>{`ticket_number: ${ticketNumber}`}</span>
           <span data-testid="count">{`count: ${count}`}</span>
           <span data-testid="status">{status}</span>
           <span data-testid="callback-called">{`cbCalled: ${cbCalled}`}</span>
@@ -93,9 +89,9 @@ describe('useSubscription', () => {
         .eq('username', USERNAME_1)
         .throwOnError();
     });
-    await screen.findByText('ticket_number: 5', {}, { timeout: 10000 });
-    expect(screen.getByTestId('count').textContent).toEqual('count: 1');
     await screen.findByText('cbCalled: true', {}, { timeout: 10000 });
+    await screen.findByText('ticket_number: 5', {}, { timeout: 20000 });
+    expect(screen.getByTestId('count').textContent).toEqual('count: 1');
     unmount();
   });
 });

packages/postgrest-swr/__tests__/utils.tsx

@@ -1,17 +1,21 @@
 import { render } from '@testing-library/react';
+import * as dotenv from 'dotenv';
+import { resolve } from 'node:path';
 import React from 'react';
 import { SWRConfig } from 'swr';
-import { resolve } from 'node:path';
 
-import * as dotenv from 'dotenv';
 dotenv.config({ path: resolve(__dirname, '../../../.env.local') });
 
 export const renderWithConfig = (
   element: React.ReactElement,
   config: Parameters<typeof SWRConfig>[0]['value']
 ): ReturnType<typeof render> => {
   const TestSWRConfig = ({ children }: { children: React.ReactNode }) => (
-    <SWRConfig value={config}>{children}</SWRConfig>
+    <SWRConfig
+      value={{ revalidateOnFocus: false, revalidateIfStale: false, ...config }}
+    >
+      {children}
+    </SWRConfig>
   );
   return render(element, { wrapper: TestSWRConfig });
 };

packages/postgrest-swr/src/cache/use-delete-item.ts

@@ -2,7 +2,7 @@ import {
   deleteItem,
   DeleteItemProps,
 } from '@supabase-cache-helpers/postgrest-mutate';
-import { useSWRConfig } from 'swr';
+import { MutatorOptions, useSWRConfig } from 'swr';
 
 import { decode, usePostgrestFilterCache } from '../lib';
 import { getMutableKeys } from '../lib/mutable-keys';
@@ -16,7 +16,7 @@ import { getMutableKeys } from '../lib/mutable-keys';
  * @returns A function that takes a record of type `Type` and returns a promise that resolves once the record has been deleted from the cache.
  * **/
 export function useDeleteItem<Type extends Record<string, unknown>>(
-  opts: Omit<DeleteItemProps<Type>, 'input'>
+  opts: Omit<DeleteItemProps<Type>, 'input'> & MutatorOptions<Type>
 ): (input: Type) => Promise<void> {
   const { mutate, cache } = useSWRConfig();
   const getPostgrestFilter = usePostgrestFilterCache();
@@ -30,7 +30,9 @@ export function useDeleteItem<Type extends Record<string, unknown>>(
       {
         cacheKeys: getMutableKeys(Array.from(cache.keys())),
         getPostgrestFilter,
-        mutate,
+        mutate: (key, data) => {
+          mutate(key, data, { ...opts, revalidate: opts?.revalidate ?? false });
+        },
         decode,
       }
     );

packages/postgrest-swr/src/cache/use-upsert-item.ts

@@ -2,7 +2,7 @@ import {
   upsertItem,
   UpsertItemProps,
 } from '@supabase-cache-helpers/postgrest-mutate';
-import { useSWRConfig } from 'swr';
+import { MutatorOptions, useSWRConfig } from 'swr';
 
 import { decode, usePostgrestFilterCache } from '../lib';
 import { getMutableKeys } from '../lib/mutable-keys';
@@ -16,7 +16,7 @@ import { getMutableKeys } from '../lib/mutable-keys';
  * @returns A function that takes a record of type `Type` and returns a promise that resolves once the record has been upserted into the cache.
  * **/
 export function useUpsertItem<Type extends Record<string, unknown>>(
-  opts: Omit<UpsertItemProps<Type>, 'input'>
+  opts: Omit<UpsertItemProps<Type>, 'input'> & MutatorOptions<Type>
 ): (input: Type) => Promise<void> {
   const { mutate, cache } = useSWRConfig();
   const getPostgrestFilter = usePostgrestFilterCache();
@@ -30,7 +30,12 @@ export function useUpsertItem<Type extends Record<string, unknown>>(
       {
         cacheKeys: getMutableKeys(Array.from(cache.keys())),
         getPostgrestFilter,
-        mutate,
+        mutate: (key, data) => {
+          mutate(key, data, {
+            ...opts.opts,
+            revalidate: opts?.revalidate ?? false,
+          });
+        },
         decode,
       }
     );

packages/postgrest-swr/src/mutate/use-delete-mutation.ts

@@ -44,6 +44,7 @@ function useDeleteMutation<
     table: getTable(qb),
     schema: qb.schema as string,
     opts,
+    ...opts,
   });
 
   return useMutation<R | null, PostgrestError, string, Partial<T['Row']>>(

packages/postgrest-swr/src/mutate/use-insert-mutation.ts

@@ -45,6 +45,7 @@ function useInsertMutation<
     table: getTable(qb),
     schema: qb.schema as string,
     opts,
+    ...opts,
   });
 
   return useMutation<R[] | null, PostgrestError, string, T['Insert'][]>(

packages/postgrest-swr/src/mutate/use-update-mutation.ts

@@ -44,6 +44,7 @@ function useUpdateMutation<
     table: getTable(qb),
     schema: qb.schema as string,
     opts,
+    ...opts,
   });
 
   return useSWRMutation<R | null, PostgrestError, string, T['Update']>(

packages/postgrest-swr/src/mutate/use-upsert-mutation.ts

@@ -45,6 +45,7 @@ function useUpsertMutation<
     table: getTable(qb),
     schema: qb.schema as string,
     opts,
+    ...opts,
   });
 
   return useMutation<R[] | null, PostgrestError, string, T['Insert'][]>(

packages/postgrest-swr/src/subscribe/use-subscription-query.ts

@@ -86,12 +86,14 @@ function useSubscriptionQuery<
     table: filter.table,
     schema: filter.schema,
     opts,
+    ...opts,
   });
   const upsertItem = useUpsertItem({
     primaryKeys,
     table: filter.table,
     schema: filter.schema,
     opts,
+    ...opts,
   });
 
   useEffect(() => {

packages/postgrest-swr/src/subscribe/use-subscription.ts

@@ -55,12 +55,14 @@ function useSubscription<T extends GenericTable>(
     table: filter.table,
     schema: filter.schema,
     opts,
+    ...opts,
   });
   const upsertItem = useUpsertItem({
     primaryKeys,
     table: filter.table,
     schema: filter.schema,
     opts,
+    ...opts,
   });
 
   useEffect(() => {
@@ -77,6 +79,7 @@ function useSubscription<T extends GenericTable>(
               REALTIME_POSTGRES_CHANGES_LISTEN_EVENT.INSERT ||
             payload.eventType === REALTIME_POSTGRES_CHANGES_LISTEN_EVENT.UPDATE
           ) {
+            console.log('upsert item');
             await upsertItem(payload.new);
           } else if (
             payload.eventType === REALTIME_POSTGRES_CHANGES_LISTEN_EVENT.DELETE