Graphql useSubscription not giving response everytime

Question

I am using Graphql useSubscription hook to hit a websocket api but there seems to be an issue. I am only receiving data when i enter the component for the first time or when i go back to some other component and come back again, when trying to refresh majority of the times I do not get the data.

Below is my setup for the following.

/* eslint-disable flowtype/no-types-missing-file-annotation */
import Cookies from 'js-cookie'

import { split, HttpLink, InMemoryCache, ApolloClient } from '@apollo/client'
import { setContext } from '@apollo/client/link/context'
import { WebSocketLink } from '@apollo/client/link/ws'
import { getMainDefinition } from '@apollo/client/utilities'
import { onError } from 'apollo-link-error'
import { ApolloLink } from 'apollo-link'

const env = process.env.NODE_ENV
const domain = env === 'development' ? 'localhost' : '.xyz'
const url = env === 'development' ? 'https://staging-xxx.xxxx.xx' : process.env.REACT_APP_API_URL;
const wsURL = env === 'development' ? 'wss://staging-xxx.xxxxx.xx/subscriptions' : process.env.REACT_APP_WSS_URL;
const httpLink = new HttpLink({
  uri: url,
  credentials: 'include'
})

const authLink = setContext((_: any, { headers }: any) => {
  const app_token = Cookies.get('xxxxx', { domain: domain })
  let token = app_token || 'insta-checkout'
  return {
    headers: {
      ...headers,
      MUDEY_AUTH_TOKEN: token
    }
  }
})

const wsLink = new WebSocketLink({
  uri: wsURL,
  options: {
    reconnect: true,
    connectionParams: async () => {
      const app_token = await Cookies.get('xxxxx', { domain: domain })
      return {
        credentials: 'include',
        MUDEY_AUTH_TOKEN: app_token,
        Authorization: 'Basic xxxxxxxxxxxxxxxxxxx'
      }
    }
  }
})

const link = split(
  ({ query }: any) => {
    const definition = getMainDefinition(query)
    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription'
  },
  wsLink,
  authLink.concat(httpLink)
)
const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: ApolloLink.from([link])
})

export default client

Now when i go my component for the first time, i am calling the subscriptions api by

import React from "react";
import { useMutation, useSubscription } from "@apollo/react-hooks";

export const NewComponent = () => {
  const {
    loading: loadingPackages,
    data,
    error,
  } = useSubscription(SUBSCRIBE_CAR_PACKAGES, {
    onSubscriptionData: useCallback((res: any) => {
      const {
        subscribeCarJourneyPackages: { message: stopWS, data: packagesResult },
      } = res.subscriptionData.data;
      if (packagesResult !== null) {
        console.log("packarray", packagesResult);
        setIsSubsLoading(true);
      }

      if (stopWS === "SUBSCRIPTION_COMPLETE") {
        dispatch({ type: SET_ALL_PACKAGES, payload: packArray });
        setIsSubsLoading(false);
      } else {
        // setIsSubsLoading(true)
      }
    }, []),
    onError: useCallback((err: any) => {
      apiErrorHandler(err);
    }, []),
    variables: { id: journeyID },
  });
  return null;
};

So the response i see is

But once i start refreshing the page , i only see

So what the issue in my frontend, for not getting the response 100% of the time ? should we need to close the connection everytime we receive response ?

Also i see the subscription api hitting even when i am in my homepage, where ideally it should hit in the results page where i want it, do this happens the moment we define connection and is it normal?