R
Refine

ask-any-question

Dynamic variable useSubscription

Ssensitive-blue6/2/2023
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);
};
Kkapa.ai6/2/2023
Hi @realdragonma. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Kkapa.ai6/2/2023
---------------------- 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.
Kkapa.ai6/2/2023
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
Ssensitive-blue6/2/2023
@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
Kkapa.ai6/2/2023
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: ----------------------
Kkapa.ai6/2/2023
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
Ssensitive-blue6/2/2023
@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)"
Kkapa.ai6/2/2023
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]);
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: ----------------------
Kkapa.ai6/2/2023
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
Ssensitive-blue6/2/2023
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
Kkapa.ai6/2/2023
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: ----------------------
Kkapa.ai6/2/2023
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
Ssensitive-blue6/2/2023
It works but is there any other way ? @kapa.ai it works, but how if there are 2 variables
Kkapa.ai6/2/2023
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: ----------------------
Kkapa.ai6/2/2023
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
Ssensitive-blue6/2/2023
@kapa.ai it doesnt work
Kkapa.ai6/2/2023
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!
Ssensitive-blue6/2/2023
Help me please 😭 @kapa.ai cant you find any other way to look at a state variable in a useSubscription ?
Kkapa.ai6/2/2023
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!

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Auto fill filter form in Table FilterWhen using filter form to filter data in table it does work. How can I make sure that the filter foruseInfiniteListHello. I am using useInfiniteList, how do I make it so that when I load new elements, they are addeHow to retrieve a list of elementsHello, I don't quite understand how refine works. I would like to retrieve the list of all my exerciHow do I use the token generated by the Google auth?I am using Refine with built in Google authorization process. I would like to use the token, becauseIs refine for a admin panel or for aIs refine for a admin panel, or for a whole website? Because I have to replace mainly the whole frodoes refine fully support Nextjs?I mainly use Next JS, I might go with PlanetScale for my DB instead of Supabasehey guys please who do i pitch for ahey guys, please who do i pitch for a technical article idea?Dockerfile Config for ProductionHello, I wonder if there is a dockerfile example so that I can deploy my Refine project in productioAfter adding a parent to my menuItem in the sidebar the create: AddEmployee is giving 404 errorI have an element called My Business which is a parent element in the sidebar and I have under it EmHow to place my submenus on the right from the sider instead of placing them under itIs there a simple way to do that?Compile error next-authGenerated project: Nextjs + Ant Design+ Hasura + Auth0. Unzipped, `npm install`, `npm run dev` and fResources with the same name on different APIsHello Refine community and maintainers! Thanks again for this awesome product, that really helps me SOLVED nothing to do with Refine it wasSOLVED: nothing to do with Refine, it was Expo cache issue, options to disable both work fine on ExpAccess control cerbos in production with refine app.I am using cerbos for my access control and it is working fine I don't have any issue with it duringProperty 'rev' is missing in type '{}'Hi, I'm experiencing this while building on all of the antdesign icons and can't find it in the antcall specific routehi how I can call a specific route ? for example if I want to call secndoary router to get specific auth-providerGiven that my current setup is tentative, how can I configure my auth-provider to make an axios.postAuthPage remember meHi I'm using Antd for UI. In my default login page, I want to implement the 'Remember me' feature. The useApiUrl hook retrieves the default API URL in multiple data providersAccording to the documentation, one can use multiple data providers like: ```js dataProvider={{ dget selected table rows dataiam using a table with selection enabled and i need to get the datas of slected rows iam using mater