Refine•3y 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);
    };

kapa.ai•6/2/23, 4:11 PM

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

kapa.ai•6/2/23, 4:11 PM

----------------------
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

Note: you can ask me a follow up question by @ mentioning me again

----------------------

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•6/2/23, 4:11 PM

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

skinny-azureOP•6/2/23, 4:17 PM

@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•6/2/23, 4:17 PM

Let me check the knowledge base for you. One moment!

kapa.ai•6/2/23, 4:18 PM

----------------------
It seems that the hook might not be aware of the changes in the variable. To make the hook aware of the changes, you can try using the

useEffect

useEffect

hook to manage the subscription based on the variable.

Here's an example of how you can modify your code:

In this example, we use the

useEffect

useEffect

hook to manage the subscription. When the 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 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 , 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

Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•6/2/23, 4:18 PM

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

skinny-azureOP•6/2/23, 4:19 PM

@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•6/2/23, 4:19 PM

Let me check the knowledge base for you. One moment!

kapa.ai•6/2/23, 4:20 PM

----------------------
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

useEffect

hook to manage the subscription and pass a dependency array that includes the variable. Here's an updated example:

In this example, we use the

useEffect

useEffect

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•6/2/23, 4:20 PM

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

skinny-azureOP•6/2/23, 4:21 PM

It doesn"t work

skinny-azureOP•6/2/23, 4:30 PM

@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•6/2/23, 4:30 PM

Let me check the knowledge base for you. One moment!

kapa.ai•6/2/23, 4:31 PM

----------------------
I apologize for the confusion in my previous responses. You're right, we cannot put the hook inside a

useEffect

useEffect

hook. Instead, you can try using the

enabled

enabled

property of the hook to control the subscription based on the variable. Here's an example:

In this example, we use the

enabled

enabled

property to control whether the subscription is active or not. When is not

undefined

undefined

, the subscription will be enabled, and the callback will be executed. If is

undefined

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 , 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

Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•6/2/23, 4:31 PM

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

skinny-azureOP•6/2/23, 4:36 PM

It works but is there any other way ?

skinny-azureOP•6/2/23, 4:44 PM

@kapa.ai it works, but how if there are 2 variables

kapa.ai•6/2/23, 4:44 PM

Let me check the knowledge base for you. One moment!

kapa.ai•6/2/23, 4:45 PM

----------------------
If you have two variables that you want to use as dependencies for the hook, you can create a custom hook that wraps the hook and takes the dependencies as arguments. Here's an example:

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

This custom hook will enable the subscription only when both and are not

undefined

undefined

. The 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 , 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

Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•6/2/23, 4:45 PM

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

skinny-azureOP•6/2/23, 4:47 PM

@kapa.ai it doesnt work

kapa.ai•6/2/23, 4:47 PM

Let me check the knowledge base for you. One moment!

kapa.ai•6/2/23, 4:47 PM

@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!

skinny-azureOP•6/2/23, 4:51 PM

Help me please

skinny-azureOP•6/2/23, 4:58 PM

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

kapa.ai•6/2/23, 4:58 PM

Let me check the knowledge base for you. One moment!

kapa.ai•6/2/23, 4:58 PM