Trouble with INSERT: "Unhandled Runtime Error / Error: Wildcard selector is not supported"

[scoover]

Hey @psteinroe! Thanks for creating what appears to be an amazing library. If I can work through one issue, I think it is going to be really helpful to me.

I've gone through the docs and have the useQuery() side working great in a custom hook:

import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
const { data: events, isFetching } = useQuery(supabase.from("events").select());

The same custom hook creates an insertEvents function (I have hardcoded the new event record for testing purposes):

const { mutateAsync: insertEvents } = useInsertMutation(supabase.from("events"), ["id"], null);
...
return {
    events,
    insertEvents: async (events: Event[]) => {
      await insertEvents([
        {
          id: 5,
          created_at: "2024-06-18 04:57:01.462798+00",
          team_id: 2,
          game_id: 354,
          point_id: "c56f9bea-560e-48d7-a8fa-25a61b7b2eff",
          player_id: 147,
          event: "in",
          count: 1,
        },
      ]);
    },
  };

My issue is that whenever I call insertEvents(), I get "Unhandled Runtime Error / Error: Wildcard selector is not supported" when I try to perform a row insert. (I can't even determine what "wildcard selector" it is referring to.) I can see in the Supabase dashboard that the record is not being created in the database— in fact, the browser does not appear to be posting to the server— and the cache is also not being updated.

The keys team_id, game_id, point_id, player_id connect to foreign keys. In the hardcoded example above, all values are valid.,

I'm not using react-query or Supabase cache helpers anywhere else in my project.

I'm using these versions with React 18.3.1 deployed on Vercel: "@supabase-cache-helpers/postgrest-react-query": "^1.7.0", "@supabase/ssr": "^0.3.0", "@supabase/supabase-js": "^2.43.5", "@tanstack/react-query": "^5.45.1",

My event records look like this:

id: number;
created_at: string;
count: number | null;
event: Database["public"]["Enums"]["event_type"] | null;
game_id: number | null;
player_id: number | null;
point_id: string | null;
team_id: number | null;

Ideally id (the primary key) and created_at would not need to be passed and would be generated on creation by the database.

There aren't too many examples in the repo nor on the internet on how to use the mutations functions. Do you have any suggestions? Thanks.

[psteinroe]

hey @scoover, thanks for the kind words.

Your query supabase.from("events").select() is the same as supabase.from("events").select('*'). You can see here that postgrest-js defaults to it. https://github.com/supabase/postgrest-js/blob/24dcbde8fcb5d4543d6f91d7ed5a637b44ce5520/src/PostgrestQueryBuilder.ts#L73

Unfortunately, the wildcard selector (*) is not supported (yet). It's something I have on my bucket list for a long time already but it requires me to refactor the depths of this library - something I dont have the time for at the moment. You can find more details here #377.

To fix your issue, always specify the columns in any useQuery select() call, e.g. .select('id,created_at,count').

[scoover]

Thanks for the quick fix, @psteinroe.

I had spent the day re-implementing the hooks in React Query but when I returned to Cache Helpers with your fix the hook I had refactored all day was about 1/3 the amount of code.

The good news is that listing out all the column names in the query-select resolved the wildcard selector issue as you suggested. Subscriptions are also working properly. Thank you.

Unfortunately, I'm now running into some issues where inserts and updates using useInsertMutation and useUpdateMutation are updating the database but not updating the cache... though useDeleteMutation is working. My records just have one primary key id so it feels straightforward. When I INSERT, I am allowing the database to create the id but the insert tooling is not working even when I hardcode a new/unique id.

If you have any quick fixes let me know. Otherwise I'm going to put this down for a bit.

Thanks.

[psteinroe]

Happy to help if you share a few snippets 🙏🏼