stormy-gold•2y ago

Dynamic variable useSubscription

Hi, I have a problem, when my sessionChoose variable is updated, it doesn't take effect in the useSubscription, it is considered as undefined, so I can't process what I want, does anyone have any ideas? Here's my code

 const [sessionChoose, setSessionChoose] = useState<ISession | undefined>();
    const [columns, setColumns] = useState<ColumnsType<ISession>>([]);
    const [data, setData] = useState<any>([]);

    const {data: dataSessions} = useList<ISession>({
        resource: "sessions",
    });

    const sessions: ISession[] | undefined = dataSessions?.data;


    // Functions

    useSubscription({
        channel: "tentatives",
        onLiveEvent: (data: any) => {
            const tentative: ITentative = data.etudiantFaitNouvelleTentative;
            if(tentative.idSession !== sessionChoose?.id) return;

        }
    })

    const handleSessionChange = (value: string) => {
        const chosenSession = sessions?.find((session) => session.nom === value);
        setSessionChoose(chosenSession);
    };

 const [sessionChoose, setSessionChoose] = useState<ISession | undefined>();
    const [columns, setColumns] = useState<ColumnsType<ISession>>([]);
    const [data, setData] = useState<any>([]);

    const {data: dataSessions} = useList<ISession>({
        resource: "sessions",
    });

    const sessions: ISession[] | undefined = dataSessions?.data;


    // Functions

    useSubscription({
        channel: "tentatives",
        onLiveEvent: (data: any) => {
            const tentative: ITentative = data.etudiantFaitNouvelleTentative;
            if(tentative.idSession !== sessionChoose?.id) return;

        }
    })

    const handleSessionChange = (value: string) => {
        const chosenSession = sessions?.find((session) => session.nom === value);
        setSessionChoose(chosenSession);
    };

19 Replies

kapa.ai•2y ago

Hi @realdragonma. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the useSubscription documentation (https://refine.dev/docs/api-reference/core/hooks/live/useSubscription/) for more information on how to use the hook properly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

useSubscription | refine

useSubscription calls the subscribe method from liveProvider when mounted. It is useful when you want to subscribe to a Realtime channel.

kapa.ai•2y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

stormy-goldOP•2y ago

@kapa.ai the sessionChoose variable is a dynamic variable, it can change value, but this doesn't seem to be taken into account in useSubscription

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It seems that the useSubscription hook might not be aware of the changes in the sessionChoose variable. To make the useSubscription hook aware of the changes, you can try using the useEffect hook to manage the subscription based on the sessionChoose variable. Here's an example of how you can modify your code:

import { useEffect } from "react";
import { useSubscription } from "@refinedev/core";

// ...

const [unsubscribe, setUnsubscribe] = useState<(() => void) | null>(null);

useEffect(() => {
  if (sessionChoose) {
    const newUnsubscribe = useSubscription({
      channel: "tentatives",
      onLiveEvent: (data: any) => {
        const tentative: ITentative = data.etudiantFaitNouvelleTentative;
        if (tentative.idSession !== sessionChoose?.id) return;
      },
    });

    setUnsubscribe(() => newUnsubscribe);
  }

  return () => {
    if (unsubscribe) {
      unsubscribe();
    }
  };
}, [sessionChoose]);

import { useEffect } from "react";
import { useSubscription } from "@refinedev/core";

// ...

const [unsubscribe, setUnsubscribe] = useState<(() => void) | null>(null);

useEffect(() => {
  if (sessionChoose) {
    const newUnsubscribe = useSubscription({
      channel: "tentatives",
      onLiveEvent: (data: any) => {
        const tentative: ITentative = data.etudiantFaitNouvelleTentative;
        if (tentative.idSession !== sessionChoose?.id) return;
      },
    });

    setUnsubscribe(() => newUnsubscribe);
  }

  return () => {
    if (unsubscribe) {
      unsubscribe();
    }
  };
}, [sessionChoose]);

In this example, we use the useEffect hook to manage the subscription. When the sessionChoose variable changes, the effect will run, and the previous subscription will be unsubscribed (if there was one), and a new subscription will be created with the updated sessionChoose value. Please note that this is just an example based on the information provided in the extracts. You might need to adjust the code according to your specific use case. For more information on useSubscription, you can refer to the useSubscription documentation (https://refine.dev/docs/api-reference/core/hooks/live/useSubscription/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

stormy-goldOP•2y ago

@kapa.ai it gives me this error : "ESLint: React Hook "useSubscription" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.(react-hooks/rules-of-hooks)"

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion in my previous response. You're right, hooks cannot be called inside a callback or a conditional statement. Instead, you can use the useEffect hook to manage the subscription and pass a dependency array that includes the sessionChoose variable. Here's an updated example:

import { useEffect } from "react";
import { useSubscription } from "@refinedev/core";

// ...

const [unsubscribe, setUnsubscribe] = useState<(() => void) | null>(null);

useEffect(() => {
  if (unsubscribe) {
    unsubscribe();
  }

  if (sessionChoose) {
    const newUnsubscribe = useSubscription({
      channel: "tentatives",
      onLiveEvent: (data: any) => {
        const tentative: ITentative = data.etudiantFaitNouvelleTentative;
        if (tentative.idSession !== sessionChoose?.id) return;
      },
    });

    setUnsubscribe(() => newUnsubscribe);
  }

  return () => {
    if (unsubscribe) {
      unsubscribe();
    }
  };
}, [sessionChoose]);

import { useEffect } from "react";
import { useSubscription } from "@refinedev/core";

// ...

const [unsubscribe, setUnsubscribe] = useState<(() => void) | null>(null);

useEffect(() => {
  if (unsubscribe) {
    unsubscribe();
  }

  if (sessionChoose) {
    const newUnsubscribe = useSubscription({
      channel: "tentatives",
      onLiveEvent: (data: any) => {
        const tentative: ITentative = data.etudiantFaitNouvelleTentative;
        if (tentative.idSession !== sessionChoose?.id) return;
      },
    });

    setUnsubscribe(() => newUnsubscribe);
  }

  return () => {
    if (unsubscribe) {
      unsubscribe();
    }
  };
}, [sessionChoose]);

kapa.ai•2y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

stormy-goldOP•2y ago

It doesn"t work @kapa.ai is there any way to add a dependencies variable to our useSubscription ? We can't put the useSubscription into a useEffect

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion in my previous responses. You're right, we cannot put the useSubscription hook inside a useEffect hook. Instead, you can try using the enabled property of the useSubscription hook to control the subscription based on the sessionChoose variable. Here's an example:

useSubscription({{
  channel: "tentatives",
  enabled: !!sessionChoose,
  onLiveEvent: (data: any) => {{
    if (!sessionChoose) return;

    const tentative: ITentative = data.etudiantFaitNouvelleTentative;
    if (tentative.idSession !== sessionChoose.id) return;
  }},
}});

useSubscription({{
  channel: "tentatives",
  enabled: !!sessionChoose,
  onLiveEvent: (data: any) => {{
    if (!sessionChoose) return;

    const tentative: ITentative = data.etudiantFaitNouvelleTentative;
    if (tentative.idSession !== sessionChoose.id) return;
  }},
}});

In this example, we use the enabled property to control whether the subscription is active or not. When sessionChoose is not undefined, the subscription will be enabled, and the onLiveEvent callback will be executed. If sessionChoose is undefined, the subscription will be disabled. Please note that this is just an example based on the information provided in the extracts. You might need to adjust the code according to your specific use case. For more information on useSubscription, you can refer to the useSubscription documentation (https://refine.dev/docs/api-reference/core/hooks/live/useSubscription/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

stormy-goldOP•2y ago

It works but is there any other way ? @kapa.ai it works, but how if there are 2 variables

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you have two variables that you want to use as dependencies for the useSubscription hook, you can create a custom hook that wraps the useSubscription hook and takes the dependencies as arguments. Here's an example:

import { useSubscription } from "@refinedev/core";

function useCustomSubscription(dependency1, dependency2) {
  useSubscription({
    channel: "tentatives",
    enabled: !!dependency1 && !!dependency2,
    onLiveEvent: (data: any) => {
      if (!dependency1 || !dependency2) return;

      // Your custom logic based on dependency1 and dependency2
    },
  });
}

import { useSubscription } from "@refinedev/core";

function useCustomSubscription(dependency1, dependency2) {
  useSubscription({
    channel: "tentatives",
    enabled: !!dependency1 && !!dependency2,
    onLiveEvent: (data: any) => {
      if (!dependency1 || !dependency2) return;

      // Your custom logic based on dependency1 and dependency2
    },
  });
}

In your component, you can use the useCustomSubscription hook and pass the two variables as dependencies:

const [variable1, setVariable1] = useState<Variable1Type | undefined>();
const [variable2, setVariable2] = useState<Variable2Type | undefined>();

useCustomSubscription(variable1, variable2);

const [variable1, setVariable1] = useState<Variable1Type | undefined>();
const [variable2, setVariable2] = useState<Variable2Type | undefined>();

useCustomSubscription(variable1, variable2);

This custom hook will enable the subscription only when both variable1 and variable2 are not undefined. The onLiveEvent callback will be executed when both dependencies are defined. Please note that this is just an example based on the information provided in the extracts. You might need to adjust the code according to your specific use case. For more information on useSubscription, you can refer to the useSubscription documentation (https://refine.dev/docs/api-reference/core/hooks/live/useSubscription/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

stormy-goldOP•2y ago

@kapa.ai it doesnt work

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: @realdragonma That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

stormy-goldOP•2y ago

Help me please 😭 @kapa.ai cant you find any other way to look at a state variable in a useSubscription ?

kapa.ai•2y ago

Dynamic variable useSubscription

Did you find this page helpful?