-
Expected bahvior: Actual behavior: Client setup:
/* 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;
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 If waited in Not sure why I have this buggy behavior and any help is really appreciated to direct me to the solution. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
I am not sure this is a graphql-ws, it seems like it has to do with Apollo's tools (possible 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! |
Beta Was this translation helpful? Give feedback.
-
websockets/ws#1125 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? |
Beta Was this translation helpful? Give feedback.
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!