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 has not been established #100

Open
ledburyb opened this issue Aug 12, 2021 · 3 comments
Open

WebSocket connection has not been established #100

ledburyb opened this issue Aug 12, 2021 · 3 comments

Comments

@ledburyb
Copy link

Running a very similar example to the documented one but I can't seem to get subscriptions working (queries run fine).

main.js

const { createClient } = require('graphqurl');

const client = createClient({
    endpoint: 'https://<hasura-cloud-domain>/v1/graphql',
    headers: {
        'X-Hasura-Admin-Secret': '<secret>'
    },
    websocket: {
        endpoint: 'wss://<hasura-cloud-domain>/v1/graphql',
        onConnectionSuccess: () => console.log('Connected'),
        onConnectionError: () => console.log('Connection Error'),
    }
});

const eventCallback = (event) => {
    console.log('Event received:', event);
};

function errorCallback(error) {
    console.error(error);
}

client.subscribe(
    {
        query: 'subscription { core_brand_by_pk(id: 872) { name } }',
    },
    eventCallback,
    errorCallback
);
>>> node main.js
WebSocket connection has not been established
Connected
@skrenes
Copy link

skrenes commented Jan 10, 2022

Same. I've even used subscription instead of query and I've added console outputs for onGraphQLData, onGraphQLError, onGraphQLComplete, onConnectionSuccess, and onConnectionError. The only thing that shows up in the console is:

WebSocket connection has not been established
onConnectionSuccess called

The connection is occurring over wss and uses a Authorization: Bearer header for authentication. Similar configuration works over queries, just not subscriptions.

@ledburyb
Copy link
Author

I did get something working in the end building the link manually, my code is a lot more complicated as it has a lot of different links but something like this might work for you:

import { ApolloClient } from "apollo-client";
import { split } from "apollo-link";
import { WebSocketLink } from "apollo-link-ws";
import { getMainDefinition } from "apollo-utilities";

let link = new HttpLink({uri: httpEndpoint});
let wsLink = new WebSocketLink({
    uri: httpEndpoint.replace("https://", "wss://"),
    credentials: "include",
    options: {
        lazy: true,
        reconnect: true,
        connectionParams: async () => {
            return await getAuthHeaders();
        },
    },
 });
 link = split(
    ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === "OperationDefinition" &&
          definition.operation === "subscription"
        );
    },
    wsLink,
    link
);

const client = new ApolloClient({
    link
});

@skrenes
Copy link

skrenes commented Jan 12, 2022

Thanks @ledburyb . It looks like you solved the problem by switching out the library completely (to ApolloClient). I ended up doing the same, except to urql. Shocking that there's no response, especially given that these are the same folks that made Hasura.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants