WebSocket connection to 'ws://localhost:4000/graphql' failed:

Help
1 
import { PropsWithChildren, useMemo } from 'react';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider as ApolloClientProvider,
  split,
  HttpLink,
  ApolloLink,
} from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import { onError } from '@apollo/client/link/error';
import { useAuthStore, useConfigStore } from 'store';
import { useAlert } from 'hooks/useAlert';
import { fetchAuthSession } from 'aws-amplify/auth';
import { GraphQLWsLink } from "@apollo/client/link/subscriptions"
import { createClient } from 'graphql-ws';
import { getMainDefinition } from "@apollo/client/utilities"

export const ApolloProvider = ({ children }: PropsWithChildren) => {
  const { authToken, setAuthToken, onLogout, setAuthTokenExpiry } = useAuthStore();

  const isProduction = import.meta.env.MODE === 'production';

  const { config } = useConfigStore()

  const httpLink = new HttpLink({
    uri: `https://${config?.envDomainName}/graphql`,
  });

  const wsLink = new GraphQLWsLink(createClient({
    url: `ws://${config?.envDomainName}/graphql`,
  }));

  const { onAlertTrigger } = useAlert();

  const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        Authorization: authToken ? `Bearer ${authToken}` : '',
      },
    };
  });

  const errorLink = onError(({ networkError }) => {
    if (networkError) {
      const netWorkError = networkError as any;

      const isUnAuthorized =
        netWorkError?.response?.statusText?.includes('Unauthorized') ||
        netWorkError?.response?.status === 401;

      if (isUnAuthorized) {
        (async () => {
          let authToken = await fetchAuthSession();

          const token = authToken?.tokens?.accessToken?.toString();

          const tokenExpiry = authToken?.credentials?.expiration?.toString();

          if (tokenExpiry) {
            setAuthTokenExpiry(tokenExpiry);
          }
          if (token) {
            setAuthToken(token);
          } else {
            onAlertTrigger({
              type: 'error',
              message: 'Your session has expired. Please login again.',
            });

            setTimeout(() => {
              onLogout();
            }, 1000);
          }
        })();
      }
    }
  });

  const splitLink = split(
    ({ query }) => {
      const definition = getMainDefinition(query);
      return (
        definition.kind === 'OperationDefinition' &&
        definition.operation === 'subscription'
      );
    },
    wsLink,
    errorLink.concat(authLink).concat(httpLink),
  );



  const apolloClient = useMemo(
    () =>
      new ApolloClient({
        link: splitLink,
        cache: new InMemoryCache(),
        connectToDevTools: !isProduction,
      }),
    [authToken],
  );

  return <ApolloClientProvider client={apolloClient}>{children}</ApolloClientProvider>;
};

import CacheBuster from 'react-cache-buster';
import {
  ApolloProvider,
  ConfigProvider
} from 'providers';
import { Routes } from 'core/Routes';
import AuthLoader from 'components/AuthLoader';
import { version } from '../../../package.json';

const isProduction = import.meta.env.MODE === 'production';

export const app = () => {

  return (
    <CacheBuster
      currentVersion={version}
      isEnabled={isProduction}
      isVerboseMode={false}
      loadingComponent={<AuthLoader />}
      metaFileDirectory={'.'}
    >
      <ConfigProvider>
        <ApolloProvider>

          <Routes />
        </ApolloProvider>
      </ConfigProvider>
    </CacheBuster>
  );
};

export default app;


import { gql, useSubscription } from '@apollo/client';

const COMMENTS_SUBSCRIPTION = gql`
  subscription IntentionPrioritized($userId: UUID!) {
  intentionPrioritized(userId: $userId) {
    id
  }
}
`;

export const index = () => {

  const { data, loading } = useSubscription(
    COMMENTS_SUBSCRIPTION,
    { variables: { userId: "beb18a38-7d1d-46c6-b455-6f94f986bd53" } }
  );
  console.log("data: ",data);
  return <h4>New comment: test</h4>;
}

getting this issue

WebSocket connection to ‘ws://localhost:4000/graphql’ failed:
(anonymous) @ graphql-ws.js?v=0002dea8:332
Show 1 more frame
Show lessUnderstand this error
index.tsx:30 data: undefined