unwilling-turquoise•2y ago

Inferred List View Issues: (Realtime Support/Empty List)

I followed the instructions here, https://refine.dev/docs/advanced-tutorials/data-provider/supabase/#supabase-real-time-support And can confirm that live mode is working across windows for editing things in the show view, but when I add a new record it does not populate into the list. I know this used to work prior to the introduction of the inferencer Additionally, I am not sure if this is intended behavior (likely since inferrence cannot be done without any data, but it might be helpful to make the error message reflect that) Also just wanted to say I love this product and the work flow so far, building an MVP in this has been a dream and I really appreciate the support that the team has given on the questions I have asked, it's been fast and helpful ❤️

Supabase | refine

Introduction

17 Replies

refine-support-bot•2y ago

Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: It is likely that the issue is due to the fact that inference cannot be done without any data. The error message should reflect this. SOURCES: ./docs/advanced-tutorials/data-provider/supabase.md, ./docs/tutorial/1-getting-started/antd/3-generate-crud-pages.md, ./docs/examples/data-provider/supabase.md

Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.

unwilling-turquoise•2y ago

good bot! 1/2 answered is the bot a gpt one trained on the documnetation

rare-sapphire•2y ago

Hey @hortinstein sorry for the late response 🤦‍♂️ 🙏 About the error, yeah it's a dumb one and does not really mean anything to the user 🤦‍♂️ We've had this in the backlog for a long time but I'll take time today to create a PR for it and have a better explanation of errors and how to fix them 🚀 Guessing that the inferencer is not playing well with the realtime features. We can try to add this but in the meantime, you can do copy-code and paste it in your component. So you can add liveMode prop to the useTable hook 🤔 Here's the docs. for core's useTable and realtime features. You can find out more in the properties section https://refine.dev/docs/api-reference/core/hooks/useTable/#realtime-updates (I guess you already know those but just wanted to share 😅 ) About the bot, yeah its GPT with train on our documentation. Still a work in progress but it helps sometimes 😅

unwilling-turquoise•2y ago

Thank you, I will update and add

useTable({
    liveMode: "auto",
});

useTable({
    liveMode: "auto",
});

to the generated code, I appreciate the help! Great work on the software, I am really enjoying working with it (I am primarily a backend programmer) unfortunately, it's not working from the code I copied from the inferencer and added the liveMode to props

import React from "react";
import {
  useDataGrid,
  DataGrid,
  GridColumns,
  EditButton,
  ShowButton,
  DeleteButton,
  List,
  DateField,
} from "@pankod/refine-mui";

export const IPList = () => {
  const { dataGridProps } = useDataGrid({
    liveMode: "auto",
  });

  const columns = React.useMemo<GridColumns<any>>(
    () => [
      {
        field: "actions",
        headerName: "Actions",
        renderCell: function render({ row }) {
          return (
            <>
              <ShowButton hideText recordItemId={row.id} />
            </>
          );
        },
        align: "center",
        headerAlign: "center",
        minWidth: 80,
      },
      {
        field: "id",
        headerName: "Id",
        minWidth: 50,
      },
      {
        field: "created_at",
        headerName: "Created At",
        minWidth: 50,
        renderCell: function render({ value }) {
          return <DateField value={value} />;
        },
      },
      {
        field: "ip",
        headerName: "Ip",
        minWidth: 120,
      },
      {
        field: "external_ip",
        headerName: "External Ip",
        minWidth: 120,
      },
      {
        field: "city",
        headerName: "City",
        minWidth: 50,
      },
      {
        field: "country",
        headerName: "Country",
        minWidth: 50,
      },
      {
        field: "lat_long",
        headerName: "Lat Long",
        minWidth: 150,
      }
    
    ],
    []
  );

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
};

import React from "react";
import {
  useDataGrid,
  DataGrid,
  GridColumns,
  EditButton,
  ShowButton,
  DeleteButton,
  List,
  DateField,
} from "@pankod/refine-mui";

export const IPList = () => {
  const { dataGridProps } = useDataGrid({
    liveMode: "auto",
  });

  const columns = React.useMemo<GridColumns<any>>(
    () => [
      {
        field: "actions",
        headerName: "Actions",
        renderCell: function render({ row }) {
          return (
            <>
              <ShowButton hideText recordItemId={row.id} />
            </>
          );
        },
        align: "center",
        headerAlign: "center",
        minWidth: 80,
      },
      {
        field: "id",
        headerName: "Id",
        minWidth: 50,
      },
      {
        field: "created_at",
        headerName: "Created At",
        minWidth: 50,
        renderCell: function render({ value }) {
          return <DateField value={value} />;
        },
      },
      {
        field: "ip",
        headerName: "Ip",
        minWidth: 120,
      },
      {
        field: "external_ip",
        headerName: "External Ip",
        minWidth: 120,
      },
      {
        field: "city",
        headerName: "City",
        minWidth: 50,
      },
      {
        field: "country",
        headerName: "Country",
        minWidth: 50,
      },
      {
        field: "lat_long",
        headerName: "Lat Long",
        minWidth: 150,
      }
    
    ],
    []
  );

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
};

i am using the data grid and not the table if that matters, because thats the code the inferencer provided

Omer•2y ago

Hey @hortinstein , Have you enabled realtime support for your table in Supabase?

unwilling-turquoise•2y ago

Yes I did

Omer•2y ago

Is this related to the known issue with Supabase Realtime? @aliemirs @yildirayunlu

rare-sapphire•2y ago

Any chance to check for the Network tab? to see if any request is sent 🤔

unwilling-turquoise•2y ago

Sure I'll post in a couple min

unwilling-turquoise•2y ago

yeah not seeing anything... (the one update was triggered by the watcher on npm run dev)

unwilling-turquoise•2y ago

to reproduce, i am using pretty close to the boilerplate supabase project and it works on show....but the list doesnt update for some reason thanks! Really appreciate the support the team provides

rare-sapphire•2y ago

Just like the code you shared above, you don't have any filters applied right?

unwilling-turquoise•2y ago

correct

rare-sapphire•2y ago

Can I ask one more thing? 😅 Can you try with applying a simple filter? Oh, or let me try I'll be back in a min

unwilling-turquoise•2y ago

Shoot sry I missed this had to drive into work. But when I remove or add rows it doesn't appear to trigger any changes. Unfortunately I don't have access to computer till later tonight. Thanks again for your help! Also worth asking is there an easy way to inspect what the live provider is passing message wise? Like turning on console logging? Probably via manual mode instead of auto?

rare-sapphire•2y ago

Hello again Sorry for the delay 😅 Just found the issue, There are 2 issues currently, I created a fix for one and opened a PR, it will be merged and released soon 🙏 https://github.com/refinedev/refine/pull/3612 The other one is related with a known issue, which is multiple subscriptions at the same time. Here's the section about it in our docs: https://refine.dev/docs/advanced-tutorials/data-provider/supabase/#supabase-real-time-support (the caution banner at the bottom of the section) In our data-provider-supabase example, we passed options={{ liveMode: "auto" }} to the <Refine /> component. Which causes multiple subscription attempts at the list page of posts resource. (one for categories and other for posts) categories subscribes after posts and disables the posts subscription 😅 I've also updated the example and disabled the global configuration for liveMode and set it to off. Then, added liveMode: "auto" to the useTable. this did the trick and the subscription worked 🚀 The first issue was about sending empty filters, instead of passing undefined, we were passing "" when there are no filters to apply, whic breaks the subscription 🤦‍♂️ The PR will fix that soon 🚀 Sorry for the issue 🙂

unwilling-turquoise•2y ago

Thanks for the quick fix! This will fix the datagrid one as well (as opposed to usetable) Once it's released do I just need to update refine? just confirmed it's working after I updated today, thanks so much for the support!