fix bug unsubsrciption

components/MeterCard.js

@@ -5,41 +5,21 @@ import { BaseButton, TouchableOpacity } from 'react-native-gesture-handler';
 import { color, theme } from '../constants/Styles';
 import { color, theme } from '../constants/Styles';
 import { graphql } from '@apollo/react-hoc';
 import { graphql } from '@apollo/react-hoc';
 import { READ_SHADOW, SUBSCRIBE_SHADOW } from '../utils/apollo/apollo';
 import { READ_SHADOW, SUBSCRIBE_SHADOW } from '../utils/apollo/apollo';
+import { withNavigationFocus } from 'react-navigation';
 
 
-// const MeterCardWithSubscription = props => {
-// 	console.log(props);
-// 	return (
-// 		<Query query={READ_SHADOW} variables={{ deviceid: props.item.deviceId }}>
-// 			{({ subscribeToMore, ...result }) => (
-// 				<MeterCard
-// 					{...props}
-// 					{...result}
-// 					subscribeToNewShadow={() =>
-// 						subscribeToMore({
-// 							document: SUBSCRIBE_SHADOW,
-// 							variables: { deviceid: props.item.deviceId },
-// 							updateQuery: (prev, { subscriptionData }) => {
-// 								return subscriptionData;
-// 							},
-// 						})
-// 					}
-// 				/>
-// 			)}
-// 		</Query>
-// 	);
-// };
-
-const MeterCard = ({ item, onPressEachCard, data, ...rest }) => {
+const MeterCard = ({ item, onPressEachCard, data, isFocused, ...rest }) => {
+	let unsubscribeShadow = null;
 	const [breakerStatus, setBreakerStatus] = useState(item.breakerStatus);
 	const [breakerStatus, setBreakerStatus] = useState(item.breakerStatus);
 	useEffect(() => {
 	useEffect(() => {
 		subscribeToNewShadow(data.subscribeToMore);
 		subscribeToNewShadow(data.subscribeToMore);
+		isFocused === false && unsubscribeShadow();
 		return () => {
 		return () => {
-			subscribeToNewShadow.unsubscribe();
+			unsubscribeShadow();
 		};
 		};
-	}, []);
+	}, [isFocused]);
 
 
 	const subscribeToNewShadow = subscribeToMore => {
 	const subscribeToNewShadow = subscribeToMore => {
-		subscribeToMore({
+		unsubscribeShadow = subscribeToMore({
 			document: SUBSCRIBE_SHADOW,
 			document: SUBSCRIBE_SHADOW,
 			variables: { deviceid: item.deviceId },
 			variables: { deviceid: item.deviceId },
 			updateQuery: (prev, { subscriptionData }) => {
 			updateQuery: (prev, { subscriptionData }) => {
@@ -100,13 +80,11 @@ const MeterCard = ({ item, onPressEachCard, data, ...rest }) => {
 	);
 	);
 };
 };
 
 
-const withShadow = graphql(READ_SHADOW, {
-	options: props => ({
-		variables: { deviceid: props.deviceId },
-	}),
+const WithSubscription = graphql(READ_SHADOW, {
+	options: props => ({ variables: { deviceid: props.deviceId } }),
 });
 });
 
 
-export default withShadow(MeterCard);
+export default WithSubscription(withNavigationFocus(MeterCard));
 
 
 const styles = StyleSheet.create({
 const styles = StyleSheet.create({
 	meterOn: {
 	meterOn: {

utils/apollo/apollo.js

@@ -13,26 +13,24 @@ import AsyncStorage from '@react-native-community/async-storage';
 
 
 const BASE_URL = 'gqlv2.nexpie.io';
 const BASE_URL = 'gqlv2.nexpie.io';
 
 
-let T = null;
-const getToken = async () => (T = await AsyncStorage.getItem('token'));
-getToken();
+// let T = null;
+// const getToken = async () => (T = await AsyncStorage.getItem('token'));
+// getToken();
 /*-------------------------------------------------------------------------*/
 /*-------------------------------------------------------------------------*/
 
 
 const wsLink = new WebSocketLink({
 const wsLink = new WebSocketLink({
 	uri: `wss://${BASE_URL}/graphql`,
 	uri: `wss://${BASE_URL}/graphql`,
 	options: {
 	options: {
 		reconnect: true,
 		reconnect: true,
-		connectionParams: {
-			headers: { Authorization: `Bearer ${T}` },
-		},
+		// connectionParams: {
+		// 	headers: { Authorization: `Bearer ${T}` },
+		// },
 	},
 	},
 });
 });
 
 
 const setAuthorizationLink = setContext(async () => {
 const setAuthorizationLink = setContext(async () => {
 	const token = await AsyncStorage.getItem('token');
 	const token = await AsyncStorage.getItem('token');
-	return {
-		headers: { authorization: token ? `Bearer ${token}` : '' },
-	};
+	return { headers: { authorization: token ? `Bearer ${token}` : '' } };
 });
 });
 
 
 const httpLink = new HttpLink({ uri: `https://${BASE_URL}` });
 const httpLink = new HttpLink({ uri: `https://${BASE_URL}` });
@@ -70,6 +68,43 @@ const apolloMutation = async (mutation, variables) => {
 	});
 	});
 };
 };
 
 
+export { client, apolloQuery, apolloMutation };
+
+/*----------------------------------------------------------------- */
+
+const READ_SHADOW = gql`
+	query($deviceid: String!) {
+		shadow(deviceid: $deviceid) {
+			data
+		}
+	}
+`;
+
+const WRITE_SHADOW = gql`
+	mutation($deviceid: String!, $data: JSON!) {
+		writeShadow(deviceid: $deviceid, value: $data) {
+			data
+		}
+	}
+`;
+
+const SUBSCRIBE_SHADOW = gql`
+	subscription($deviceid: String!) {
+		shadowUpdated(deviceid: $deviceid) {
+			data
+		}
+	}
+`;
+
+const QUERY_DEVICE_BY_TAG = gql`
+	query($tag: String!) {
+		device(tag: $tag) {
+			deviceid
+		}
+	}
+`;
+export { READ_SHADOW, WRITE_SHADOW, QUERY_DEVICE_BY_TAG, SUBSCRIBE_SHADOW };
+
 // const apolloSubscription = async (query, queryVariables, subscribe, subscribeVariables) => {
 // const apolloSubscription = async (query, queryVariables, subscribe, subscribeVariables) => {
 // 	const queryData = client.watchQuery({
 // 	const queryData = client.watchQuery({
 // 		query: query,
 // 		query: query,
@@ -114,52 +149,3 @@ const apolloMutation = async (mutation, variables) => {
 
 
 // 	return tempData;
 // 	return tempData;
 // };
 // };
-
-export { client, apolloQuery, apolloMutation };
-
-/*----------------------------------------------------------------- */
-
-const READ_SHADOW = gql`
-	query($deviceid: String!) {
-		shadow(deviceid: $deviceid) {
-			data
-		}
-	}
-`;
-
-const WRITE_SHADOW = gql`
-	mutation($deviceid: String!, $data: JSON!) {
-		writeShadow(deviceid: $deviceid, value: $data) {
-			data
-		}
-	}
-`;
-
-const SUBSCRIBE_SHADOW = gql`
-	subscription($deviceid: String!) {
-		shadowUpdated(deviceid: $deviceid) {
-			data
-		}
-	}
-`;
-
-const QUERY_DEVICE_BY_TAG = gql`
-	query($tag: String!) {
-		device(tag: $tag) {
-			deviceid
-		}
-	}
-`;
-export { READ_SHADOW, WRITE_SHADOW, QUERY_DEVICE_BY_TAG, SUBSCRIBE_SHADOW };
-
-// const client = new ApolloClient({
-// 	link,
-// 	// request: async operation => {
-// 	// 	const token = await AsyncStorage.getItem('token');
-// 	// 	operation.setContext({
-// 	// 		headers: {
-// 	// 			authorization: token ? `Bearer ${token}` : '',
-// 	// 		},
-// 	// 	});
-// 	// },
-// });