Skip to content

Custom Cache Updates

Sometimes, you will find yourself writing custom cache updates. The library exports two convenience hooks that expose the underlying cache operations.

Danger

These hooks do not do any API requests. They only update the local cache.

useDeleteItem

Delete a postgrest entity from the cache. Note that you have to pass a value for all primary keys in the input.

import { useDeleteItem } from "@supabase-cache-helpers/postgrest-swr";

function Page() {
    const deleteItem = useDeleteItem({
      primaryKeys: ['id'],
      table: 'contact',
      schema: 'public',
      opts,
    });

  return <div>...</div>;
}

import { useDeleteItem } from "@supabase-cache-helpers/postgrest-react-query";

function Page() {
    const deleteItem = useDeleteItem({
      primaryKeys: ['id'],
      table: 'contact',
      schema: 'public',
      opts,
    });

  return <div>...</div>;
}

useUpsertItem

Upsert a postgrest entity into the cache. Note that you have to pass a value for all primary keys in the input.

import { useUpsertItem } from "@supabase-cache-helpers/postgrest-swr";

function Page() {
    const upsertItem = useUpsertItem({
      primaryKeys: ['id'],
      table: 'contact',
      schema: 'public',
      opts,
    });

  return <div>...</div>;
}

import { useUpsertItem } from "@supabase-cache-helpers/postgrest-react-query";

function Page() {
    const upsertItem = useUpsertItem({
      primaryKeys: ['id'],
      table: 'contact',
      schema: 'public',
      opts,
    });

  return <div>...</div>;
}

useRevalidateTables

Revalidate all queries for the given tables.

import { useRevalidateTables } from "@supabase-cache-helpers/postgrest-swr";

function Page() {
    const revalidateTables = useRevalidateTables([{ schema: 'public', table: 'contact' }]);

  return <div>...</div>;
}

import { useRevalidateTables } from "@supabase-cache-helpers/postgrest-react-query";

function Page() {
    const revalidateTables = useRevalidateTables([{ schema: 'public', table: 'contact' }]);

  return <div>...</div>;
}