supabase-cache-helpers icon indicating copy to clipboard operation
supabase-cache-helpers copied to clipboard

insertMutation not invalidating query

Open Flusinerd opened this issue 1 month ago • 0 comments

Describe the bug I have a insertMutation that inserts into a join table of items and users. This table item_favorites is used to track favorite items for individual users.

I have a query that fetches item information together with item_favorites information:

// Query definition
let query = client
    .from("items")
    .select(`
      id,
      item_no,
      dimensions,
      is_laser_part,
      is_bending_part,
      is_rolled_part,
      status_id,
      item_statuses!inner (
        id,
        name,
        color
      ),
      item_favorites!left (
        id,
        user_id
      )
    `, { count: "exact" });


// Usage in component
const { data, count: totalItems, isLoading, error, refetch } = useQuery(
    getItems(client, {
      page: currentPage,
      pageSize: pageSize,
      search: debouncedSearchTerm,
    }),
    {
      enabled: !!client,
      placeholderData: keepPreviousData,
    }
  );

For creating entries in the favorites table I am using:

const { mutateAsync: insert, isPending: isInserting } = useInsertMutation(
    client.from('item_favorites') as any,
    ['id'],
    'id, user_id',
    {
      onSuccess: () => {
        toast.success("Artikel zu Favoriten hinzugefügt");
      },
      onError: (error) => {
        toast.error("Fehler beim Hinzufügen zu Favoriten", {
          description: error.message,
        });
      },
    }
  );

To Reproduce If possible, open a PR with a failing test. Otherwise, describe how to reproduce the behavior:

  1. Let the component load the data.
  2. Insert a new favorite
  3. Query is not invalidated and data is not refreshed

Expected behavior Items query to be invalidated and therefore refreshing data because the related data has changed.

Additional context Add any other context about the problem here.

"@tanstack/react-query": "^5.66.5",
"@supabase/ssr": "^0.7.0",
"@supabase/supabase-js": "^2.75.1",
"@supabase/postgrest-js": "1.19.4",
"@supabase-cache-helpers/postgrest-react-query": "^1.13.6",

Request for creating favorite entry is send. After reloading the data is also present Image Response;

[
    {
        "id": "f12ab6af-e7dc-4ea5-b07e-da3e98cbf8a4",
        "user_id": "22788196-f32b-4230-b7f0-cfcf2e8b1cbc"
    }
]

Tanstack Query devtools: The top query is the query for the items data The bottom query gets created by the insertion Mutation Image

Maybe related TS error.

Fixed this by pinning @supabase/postgrest-js to 1.19.4

Image
Argument of type 'PostgrestQueryBuilder<{ PostgrestVersion: "12"; }, { Tables: { ansprechpartner: { Row: { created_at: string | null; created_by: string | null; first_name: string; id: string; last_name: string; updated_at: string | null; updated_by: string | null; }; Insert: { ...; }; Update: { ...; }; Relationships: []; }; ... 22 m...' is not assignable to parameter of type 'PostgrestQueryBuilder<ClientServerOptions, GenericSchema, GenericTable, string, unknown>'.
  The types of 'select(...).eq' are incompatible between these types.
    Type '<ColumnName extends string>(column: ColumnName, value: ResolveFilterValue<{ Tables: { ansprechpartner: { Row: { created_at: string | null; created_by: string | null; first_name: string; id: string; last_name: string; updated_at: string | null; updated_by: string | null; }; Insert: { ...; }; Update: { ...; }; Relatio...' is not assignable to type '<ColumnName extends string>(column: ColumnName, value: ResolveFilterValue<GenericSchema, GenericTable, ColumnName> extends never ? {} : ResolveFilterValue<GenericSchema, GenericTable, ColumnName> extends infer ResolvedFilterValue ? NonNullable<...> : never) => PostgrestFilterBuilder<...>'.
      Types of parameters 'value' and 'value' are incompatible.
        Type 'ResolveFilterValue<GenericSchema, GenericTable, ColumnName> extends never ? {} : ResolveFilterValue<GenericSchema, GenericTable, ColumnName> extends infer ResolvedFilterValue ? NonNullable<...> : never' is not assignable to type 'ResolveFilterValue<{ Tables: { ansprechpartner: { Row: { created_at: string | null; created_by: string | null; first_name: string; id: string; last_name: string; updated_at: string | null; updated_by: string | null; }; Insert: { ...; }; Update: { ...; }; Relationships: []; }; ... 22 more ...; wzm_types: { ...; }; };...'.
          Type '{} | (ResolveFilterValue<GenericSchema, GenericTable, ColumnName> extends infer ResolvedFilterValue ? NonNullable<ResolvedFilterValue> : never)' is not assignable to type 'ResolveFilterValue<{ Tables: { ansprechpartner: { Row: { created_at: string | null; created_by: string | null; first_name: string; id: string; last_name: string; updated_at: string | null; updated_by: string | null; }; Insert: { ...; }; Update: { ...; }; Relationships: []; }; ... 22 more ...; wzm_types: { ...; }; };...'.
            Type '{}' is not assignable to type 'ResolveFilterValue<{ Tables: { ansprechpartner: { Row: { created_at: string | null; created_by: string | null; first_name: string; id: string; last_name: string; updated_at: string | null; updated_by: string | null; }; Insert: { ...; }; Update: { ...; }; Relationships: []; }; ... 22 more ...; wzm_types: { ...; }; };...'.ts(2345)

Client is created like this:

import { createBrowserClient } from '@supabase/ssr'
import type { Database } from './database.types'
import { env } from '@/env'

export function createClient() {
  return createBrowserClient<Database>(
    env.VITE_SUPABASE_URL,
    env.VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY
  )
}

Any help is appriciated. Thanks in advance.

Flusinerd avatar Oct 23 '25 08:10 Flusinerd