Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
asadDev02 opened this issue Jul 1, 2024 · 3 comments
Closed

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

asadDev02 opened this issue Jul 1, 2024 · 3 comments

Comments

@asadDev02
Copy link

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

@jerelmiller
Copy link
Member

Hey @Muhammad-Asad-Mughal 👋

Unfortunately its very difficult to understand what the issue is without a runnable reproduction or access to your server.

GraphQLWsLink is just a small wrapper around the graphql-ws client to be able to subscribe and send updates back through the link chain, but it doesn't do any of the network stuff itself. For that, you'll need to debug why your graphql-ws client isn't able to connect.

A couple things to check on your end:

  • Make sure the websocket endpoint is available and exposed at /graphql
  • If your websocket endpoint requires authentication, you may need to specify connectionParams on your graphql-ws client to send any auth tokens you may need (note that headers aren't available here)
  • Make sure your server understands and uses the graphql-ws protocol (this is usually handled for you if you're using a graphql-ws server package on your server)

Since this isn't an issue with Apollo Client, I'm going to go ahead and close this issue. Hopefully you're able to figure out why your websocket endpoint won't connect. Please let me know if I've made a mistake and I'd be happen to open this again. Thanks!

Copy link
Contributor

github-actions bot commented Jul 1, 2024

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

Copy link
Contributor

github-actions bot commented Aug 1, 2024

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants