Skip to content

insertMutation not invalidating query #644

@Flusinerd

Description

@Flusinerd

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions