Unexpected subscription behavior after a complete message is sent

[malekzo]

Expected bahvior:
1- Mount page A which has a subscription (subscribeToMore).
2- Subsription is initialised with auth token.
3- Server dispatches a ConnectionAck when successful.
3- Subscription listen to changes.
4- Once I unmount Page A (navigate to Page B) a complete message is sent from the client to the server.
5- Once I mount component A again, a subscription should be re-established to listen to new changes.

Actual behavior:
Everything works exept for point 5. Once i mount Page A, no connection is being established/re-established.

Client setup:

client.ts

/* a function to send authorization header to every http request by chaining together httpLink */
const authLink = setContext(async (_, { headers }) => {
  // /* get the authentication token from local storage if it exists */
  const token = window.localStorage.getItem("token");

  /* return the headers to the context so httpLink can read them */
  return {
    headers: {
      ...headers,
      authorization: token ? `${token}` : null,
    },
  };
});

/* HttpLink is a terminating link that sends a GraphQL operation to a remote endpoint over HTTP */
const httpLink = new HttpLink({
  uri: "http://localhost:8080/graphql",
  headers: {
    "Content-Type": "application/json",
  },
});

const wsLink = new GraphQLWsLink(
  createClient({
    url: "ws://localhost:8080/graphql",
    connectionParams: () => ({
      Authorization: localStorage.getItem("token"),
    }),
    on: {
      connected: () => {
        console.log("connected");
      },
      closed: () => {
        console.log("closed");
      },
    },
  }),
);

/* split function that let us communicate by operation - http/ws */
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" && definition.operation === "subscription"
    );
  },
  wsLink,
  httpLink,
);

/* Handle and inspect errors in our GraphQL network stack. */
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );

  if (networkError) console.log(`[Network error]: ${networkError}`);
});

// apollo client config
const client = new ApolloClient({
  link: from([errorLink, authLink.concat(splitLink)]),
  cache,
});

export default client;

ComponentA.tsx

  React.useEffect(() => {
    subscribeToMore({
      document: SUB_UPDATE_USERS,
      updateQuery: (prev, { subscriptionData }) => {
        if (subscriptionData.data === undefined) {
          console.error("Subscription result in wrong format");
          return prev;
        }
        if (!subscriptionData.data.onUsersChanged) return prev;
        const updatedUser = subscriptionData.data.onUsersChanged;
        return {
          ...prev,
          getUsersQuery: {
            users: [updatedUser],
          },
        };
      },
    });
  }, []);

// both useEffect's is producing the same behavior.

  // React.useEffect(() => {
  //   const unsubscribe = subscribeToMore({
  //     document: SUB_UPDATE_USERS,
  //     updateQuery: (prev, { subscriptionData }) => {
  //       if (subscriptionData.data === undefined) {
  //         console.error("Subscription result in wrong format");
  //         return prev;
  //       }
  //       if (!subscriptionData.data.onUsersChanged) return prev;
  //       const updatedUser = subscriptionData.data.onUsersChanged;
  //       return {
  //         ...prev,
  //         getUsersQuery: {
  //           users: [updatedUser],
  //         },
  //       };
  //     },
  //   });
  // return () => {
  //     unsubscribe()
  // }, []);

I mount Page A (which looks fine)

When I am still on the page and added two users

When i unmount (navigate to Page B)

Tried to do some consoles inside the wsLink to track the activity of the socket/subscription and the console log is still connected, even when I unmount Page A, it appears that it takes 1 minute to console closed.

If waited in Page B until closed is logged, after that mount Page A again, then subscription is established and everything works fine.

Not sure why I have this buggy behavior and any help is really appreciated to direct me to the solution.

[enisdenjo]

I am not sure this is a graphql-ws, it seems like it has to do with Apollo's tools (possible subscribeToMore, I've had issues reported about it before).

To check whether this is really an issue with graphql-ws, please strip out the Apollo things and use graphql-ws directly. If the issue still occurs, a repro repository would be greatly appreciated!

[Amareis]

Tried to do some consoles inside the wsLink to track the activity of the socket/subscription and the console log is still connected, even when I unmount Page A, it appears that it takes 1 minute to console closed.

websockets/ws#1125
It can be ws server issue.

If connection stuck in CLOSING state, there is possible bug in client, which causes to not-resub on subscription - for example, because it wait for socket to close first. Not really sure how client should act in such case - this is some sort of undefined beavior, because usually CLOSING state is going to CLOSE in few milliseconds.

@malekzo can you add setInterval to check if websocket is stuck in CLOSING state?