socket

Hello,
I have a question I am trying to integrate socket.io for live-provider.
I have an order list which I want to refetch when I get new socket message from be
be socket channel name is managerNewOrder, message payload is { orderId: number }

current implementation that doesn't work

live provider

export const liveProvider = (socket: Socket): LiveProvider => {
  return {
    subscribe: ({ channel, callback }) => {
      socket.on(channel, (message: { orderId: number }) => {
        const liveEvent = {
          channel,
          type: "created",
          payload: {
            orderId: message.orderId,
          },
          date: new Date(),
        };
        callback(liveEvent);
      });

      return { socket };
    },
    unsubscribe: (subscription) => {
      const { socket } = subscription;
      socket.disconnect();
    },
  };
};

export const liveProvider = (socket: Socket): LiveProvider => {
  return {
    subscribe: ({ channel, callback }) => {
      socket.on(channel, (message: { orderId: number }) => {
        const liveEvent = {
          channel,
          type: "created",
          payload: {
            orderId: message.orderId,
          },
          date: new Date(),
        };
        callback(liveEvent);
      });

      return { socket };
    },
    unsubscribe: (subscription) => {
      const { socket } = subscription;
      socket.disconnect();
    },
  };
};

export const liveProvider = (socket: Socket): LiveProvider => {
  return {
    subscribe: ({ channel, callback }) => {
      socket.on(channel, (message: { orderId: number }) => {
        const liveEvent = {
          channel,
          type: "created",
          payload: {
            orderId: message.orderId,
          },
          date: new Date(),
        };
        callback(liveEvent);
      });

      return { socket };
    },
    unsubscribe: (subscription) => {
      const { socket } = subscription;
      socket.disconnect();
    },
  };
};

export const liveProvider = (socket: Socket): LiveProvider => {
  return {
    subscribe: ({ channel, callback }) => {
      socket.on(channel, (message: { orderId: number }) => {
        const liveEvent = {
          channel,
          type: "created",
          payload: {
            orderId: message.orderId,
          },
          date: new Date(),
        };
        callback(liveEvent);
      });

      return { socket };
    },
    unsubscribe: (subscription) => {
      const { socket } = subscription;
      socket.disconnect();
    },
  };
};

refine component props

 <Refine
          liveProvider={socket ? liveProvider(socket) : undefined}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
            projectId: "k4PAcA-FMrNUy-Vo",
            liveMode: "auto",
          }}
          resources={[
            {
              name: "orders",
              list: "/orders",
              show: "/orders/show/:id",
              meta: {
                canDelete: false,
              },
            },
//.....

 <Refine
          liveProvider={socket ? liveProvider(socket) : undefined}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
            projectId: "k4PAcA-FMrNUy-Vo",
            liveMode: "auto",
          }}
          resources={[
            {
              name: "orders",
              list: "/orders",
              show: "/orders/show/:id",
              meta: {
                canDelete: false,
              },
            },
//.....

 <Refine
          liveProvider={socket ? liveProvider(socket) : undefined}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
            projectId: "k4PAcA-FMrNUy-Vo",
            liveMode: "auto",
          }}
          resources={[
            {
              name: "orders",
              list: "/orders",
              show: "/orders/show/:id",
              meta: {
                canDelete: false,
              },
            },
//.....

 <Refine
          liveProvider={socket ? liveProvider(socket) : undefined}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
            projectId: "k4PAcA-FMrNUy-Vo",
            liveMode: "auto",
          }}
          resources={[
            {
              name: "orders",
              list: "/orders",
              show: "/orders/show/:id",
              meta: {
                canDelete: false,
              },
            },
//.....

order list

export const OrderList: React.FC<IResourceComponentsProps> = () => {
  const translate = useTranslate();
  const { tableProps, tableQueryResult } = useTable({
    syncWithLocation: true,
    liveMode: "auto",
  });

  useSubscription({
    channel: "managerNewOrder",
    onLiveEvent: (event) => {
      console.log(event);
      tableQueryResult.refetch();
    },
  });

export const OrderList: React.FC<IResourceComponentsProps> = () => {
  const translate = useTranslate();
  const { tableProps, tableQueryResult } = useTable({
    syncWithLocation: true,
    liveMode: "auto",
  });

  useSubscription({
    channel: "managerNewOrder",
    onLiveEvent: (event) => {
      console.log(event);
      tableQueryResult.refetch();
    },
  });

export const OrderList: React.FC<IResourceComponentsProps> = () => {
  const translate = useTranslate();
  const { tableProps, tableQueryResult } = useTable({
    syncWithLocation: true,
    liveMode: "auto",
  });

  useSubscription({
    channel: "managerNewOrder",
    onLiveEvent: (event) => {
      console.log(event);
      tableQueryResult.refetch();
    },
  });

export const OrderList: React.FC<IResourceComponentsProps> = () => {
  const translate = useTranslate();
  const { tableProps, tableQueryResult } = useTable({
    syncWithLocation: true,
    liveMode: "auto",
  });

  useSubscription({
    channel: "managerNewOrder",
    onLiveEvent: (event) => {
      console.log(event);
      tableQueryResult.refetch();
    },
  });

socket

Similar Threads

Similar Threads

Similar Threads