ambitious-aqua
ambitious-aqua16mo 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
No description
17 Replies
refine-support-bot
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.
ambitious-aqua
ambitious-aqua16mo ago
good bot! 1/2 answered is the bot a gpt one trained on the documnetation
unwilling-turquoise
unwilling-turquoise16mo 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 😅
ambitious-aqua
ambitious-aqua16mo 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
Omer16mo ago
Hey @hortinstein , Have you enabled realtime support for your table in Supabase?
ambitious-aqua
ambitious-aqua16mo ago
Yes I did
Omer
Omer16mo ago
Is this related to the known issue with Supabase Realtime? @aliemirs @yildirayunlu
unwilling-turquoise
unwilling-turquoise16mo ago
Any chance to check for the Network tab? to see if any request is sent 🤔
ambitious-aqua
ambitious-aqua16mo ago
Sure I'll post in a couple min
ambitious-aqua
ambitious-aqua16mo ago
yeah not seeing anything... (the one update was triggered by the watcher on npm run dev)
No description
ambitious-aqua
ambitious-aqua16mo 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
unwilling-turquoise
unwilling-turquoise16mo ago
Just like the code you shared above, you don't have any filters applied right?
ambitious-aqua
ambitious-aqua16mo ago
correct
unwilling-turquoise
unwilling-turquoise16mo 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
ambitious-aqua
ambitious-aqua16mo 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?
unwilling-turquoise
unwilling-turquoise16mo 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 🙂
ambitious-aqua
ambitious-aqua16mo 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!