Refine LiveProvider with Hasura

[vadim-roshuor]

Hey!)
I'm trying to add liveProvider to my project. I use a Hasura us dataProvider
But its not working for me(
At first I get the data, but when I change an item, the data is not updated in real time
And there is no mistake

App.tsx:

const API_URL = "https://nhg.hasura.app/v1/graphql";
const AblyKey = '******'

export const ablyClient = new Ably.Realtime(AblyKey);

const client = new GraphQLClient(API_URL, {
  headers: {
    'x-hasura-admin-secret': '*********'
  },
});

const gqlDataProvider = dataProvider(client);

const App: React.FC = () => {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={gqlDataProvider}
      liveProvider={liveProvider(ablyClient)}
      resources={
        [
          {
            name: "products",
            list: ProductList
          }
        ]
      }
      liveMode="auto"
      Layout={Layout}
      ReadyPage={ReadyPage}
      notificationProvider={notificationProvider}
      catchAll={<ErrorComponent/>}
    />
  );
}

ProductList.tsx:

export const ProductList: React.FC<IResourceComponentsProps> = () => {
  const {tableProps} = useTable<IProduct>({
    initialSorter: [
      {
        field: "id",
        order: "asc",
      },
    ],
    metaData: {
      fields: [
        "id",
        'name'
      ],
    },
    liveMode:"auto",
    liveParams:{onLiveEvent: (event: any) => {
        console.log('event0', event)
        return event
      }
    }
  });

  return (
    <Table {...tableProps} rowKey="id">
      <Table.Column dataIndex="id" title="ID"/>
      <Table.Column dataIndex="name" title="Name"/>

      <Table.Column
        dataIndex="createdAt"
        title="createdAt"
        render={(value) => <DateField format="LLL" value={value}/>}
      />
      <Table.Column<IProduct>
        title="Actions"
        dataIndex="actions"
        render={(_, record) => (
          <Space>
            <EditButton
              hideText
              size="small"
              recordItemId={record.id}
            />
            <ShowButton
              hideText
              size="small"
              recordItemId={record.id}
            />
            <DeleteButton
              hideText
              size="small"
              recordItemId={record.id}
            />
          </Space>
        )}
      />
    </Table>

  );
}

[omeraplak]

Hey @vadim-roshuor ,
Thank you for contacting us! I'll try and let you know! 🎉

[omeraplak]

Hey @vadim-roshuor ,
I tried it with our Hasura data provider and the good news is everything works.

A minor mistake you made is adding the onLiveEvent in the wrong place.

Actually,

  const {tableProps} = useTable<IProduct>({
    initialSorter: [
      {
        field: "id",
        order: "asc",
      },
    ],
    metaData: {
      fields: [
        "id",
        'name'
      ],
    },
    liveMode:"auto",
    onLiveEvent: (event: any) => {
        console.log("event0", event);
        return event;
    },
  });

[vadim-roshuor]

yes

[omeraplak]

Hmm This may be the difference. I will try this tomorrow 🚀

[vadim-roshuor]

thank you

[vadim-roshuor]

@omeraplak thank you so much
The problem is no longer relevant

[omeraplak]

Is the problem solved? 🎉