Websocket Connection Fail - Uncertain Which part of Code is Wrong - ruby-on-rails

Question

Several problems. To begin with I get the following error in my devtools
WebSocket connection to 'ws://localhost:3000/cable?token=ZmllcnlAc3dhZ2dlci5jb20=' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
On my rails server, I have the following output in a doc file on the project's repo: DOWNLOAD
It was rather too large for a blockquote.
To make a long story short, the connection is timing out half the time (resetting the server fixes this). However, most of the time it seems like the subscription silently fails to fire, as even making a new article from a different browser won't update the index page. I am completely lost as to what could be causing this to fail.
Relevant code:
Rails Side ApplicationCable
module ApplicationCable
class Connection < ActionCable::Connection::Base
identified_by :current_user
def connect
self.current_user = current_user
end
private
def current_user
token = request.params[:token].to_s
email = Base64.decode64(token)
User.find_by(email: email)
end
end
end
GraphQL Channel
class GraphqlChannel < ApplicationCable::Channel
def subscribed
#subscription_ids = []
end
def execute(data)
result = execute_query(data)
payload = {
result: result.subscription? ? { data: nil } : result.to_h,
more: result.subscription?
}
#subscription_ids << context[:subscription_id] if result.context[:subscription_id]
transmit(payload)
end
def unsubscribed
#subscription_ids.each do |sid|
SwyleSchema.subscriptions.delete_subscription(sid)
end
end
private
def execute_query(data)
SwyleSchema.execute(
query: data["query"],
context: context,
variables: data["variables"],
operation_name: data["operationName"]
)
end
def context
{
current_user_id: current_user.id,
current_user: current_user,
channel: self
}
end
end
Connection.rb
module ApplicationCable
class Connection < ActionCable::Connection::Base
identified_by :current_user
def connect
self.current_user = current_user
end
private
def current_user
token = request.params[:token].to_s
email = Base64.decode64(token)
User.find_by(email: email)
end
end
end
Subscription Type
module Types
class SubscriptionType < GraphQL::Schema::Object
field :article_added, Types::ArticleType, null: false, description: "An article was posted"
def article_added
end
end
end
Create Article Mutation
module Mutations
class CreateArticle < BaseMutation
argument :title, String, required: true
argument :body, String, required: true
type Types::ArticleType
def resolve(title: nil, body: nil)
snippet = body[0, 300]
article = Article.new
article.title = title
article.body = body
article.snippet = snippet
article.user = context[:current_user]
if article.save
SwyleSchema.subscriptions.trigger("articleAdded", {}, article)
# { article: article}
article
else
{ errors: article.errors.full_messages }
end
end
end
end
Apollo.js
import { HttpLink } from 'apollo-link-http';
import { ApolloLink, Observable } from 'apollo-link';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { onError } from 'apollo-link-error';
import { ApolloClient } from 'apollo-client';
import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
import introspectionQueryResultData from './fragmentTypes.json';
import ActionCable from 'actioncable';
import ActionCableLink from 'graphql-ruby-client/subscriptions/ActionCableLink';
const getCableUrl = () => {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const host = window.location.hostname;
const port = process.env.CABLE_PORT || '3000';
const authToken = localStorage.getItem('mlToken');
debugger;
return `${protocol}//${host}:${port}/cable?token=${authToken}`;
};
const createActionCableLink = () => {
const cable = ActionCable.createConsumer(getCableUrl());
return new ActionCableLink({ cable });
};
const hasSubscriptionOperation = ({ query: { definitions } }) =>
definitions.some(
({ kind, operation }) =>
kind === 'OperationDefinition' && operation === 'subscription'
);
const getTokens = async () => {
const tokens = {
"X-CSRF-Token": document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content")
};
const authToken = await localStorage.getItem("mlToken");
return authToken ? { ...tokens, Authorization: authToken } : tokens;
};
const setTokenForOperation = async operation => {
return operation.setContext({
headers: {
// eslint-disable-next-line
... await getTokens(),
}
});
};
const createLinkWithToken = () =>
new ApolloLink(
(operation, forward) =>
new Observable(observer => {
let handle;
Promise.resolve(operation)
.then(setTokenForOperation)
.then(() => {
handle = forward(operation).subscribe({
next: observer.next.bind(observer),
error: observer.error.bind(observer),
complete: observer.complete.bind(observer),
});
})
.catch(observer.error.bind(observer));
return () => {
if (handle) handle.unsubscribe();
};
})
);
const createHttpLink = () => new HttpLink({
uri: 'http://localhost:3000/graphql',
credentials: 'include',
})
const logError = (error) => console.error(error);
const createErrorLink = () => onError(({ graphQLErrors, networkError, operation }) => {
if (graphQLErrors) {
logError('GraphQL - Error', {
errors: graphQLErrors,
operationName: operation.operationName,
variables: operation.variables,
});
}
if (networkError) {
logError('GraphQL - NetworkError', networkError);
}
})
export const createClient = (cache, requestLink) => {
const client = new ApolloClient({
link: ApolloLink.from([
createErrorLink(),
createLinkWithToken(),
ApolloLink.split(
hasSubscriptionOperation,
createActionCableLink(),
createHttpLink(),
)
// createHttpLink(),
]),
cache,
});
return client;
};
export const createCache = () => {
const fragmentMatcher = new IntrospectionFragmentMatcher({
introspectionQueryResultData
});
const cache = new InMemoryCache({fragmentMatcher});
if (process.env.NODE_ENV === 'development') {
window.secretVariableToStoreCache = cache;
}
return cache;
};
ARticles Index Component
import React, {Component} from 'react';
import articles from './queries/articles';
import { Query } from "react-apollo";
import {Link} from 'react-router-dom';
import ArticleTags from './article_tags';
import Subscription from './subscription';
class ArticlesIndex extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
const date = Date.now();
return (
<Query query={articles}>
{({ loading, error, data, subscribeToMore }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
const articles = data.articles;
return (
<div className="article-index-page">
<h1>Newest Articles</h1>
{ articles.map((article) => (
<div className="article-index-card" key={`${article.id}${article.title}${date}`}>
<h2 className="article-index-title">{article.title}</h2>
<h3 className="article-index-subtitle">by {article.author.username}</h3>
<p className="article-index-snippet">{article.snippet}<Link className="article-index-show-link" to={`/articles/${article.id}`}>{"...more"}</Link></p>
<ArticleTags tags={["lookAtThisTag", "othertag"] } />
<h4>{article.count} Comments {article.likeCount} Likes</h4>
</div>
))}
<Subscription subscribeToMore={subscribeToMore} />
</div>
)
}}
</Query>
);
}
}
export default ArticlesIndex;
Subscription Component (as per evilmartians)
import React, { useEffect } from 'react';
import ArticleSubscription from './subscriptions/article_added';
import { graphql } from 'react-apollo';
const Subscription = ({ subscribeToMore }) => {
useEffect(() => {
return subscribeToMore({
document: ArticleSubscription,
updateQuery: (prev, { subscriptionData }) => {
console.log("subdata: ", subscriptionData.data)
if (!subscriptionData.data) return prev;
const { articleAdded } = subscriptionData.data;
if (articleAdded) {
const alreadyInList = prev.articles.find(e => e.id === articleAdded.id);
if (alreadyInList) {
return prev;
}
return { ...prev, articles: prev.articles.concat([articleAdded]) };
}
return prev;
},
});
}, []);
return null;
};
export default Subscription;
And the subscriptions themselves
import gql from 'graphql-tag';
const ArticleSubscription = gql`
subscription ArticleSubscription {
articleAdded {
id
title
body
likers
likeCount
author {
id
username
},
currentUser {
id
username
email
}
}
}`
export default ArticleSubscription;