'start received before the connection is initialised'

Question

I'm working with subsciptions in my hasura vue app, but I have console msg:

'start received before the connection is initialised'

When I try to get the object result of my subscription, I test my connection and hasura dashboard look connected fine.

hasura dashboard:

connection:

import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { setContext } from "apollo-link-context";
import { split } from "apollo-link";
import { WebSocketLink } from "apollo-link-ws";
import { getMainDefinition } from "apollo-utilities";

// Instantiate required constructor fields
const httpEndpoint = "https://####/v1/graphql";
const headerLink = setContext((request, previousContext) => ({
  headers: {
    ...previousContext.headers,
    "x-hasura-user-id": localStorage.getItem("user")
      ? JSON.parse(localStorage.getItem("user")).id
      : null,
    "x-hasura-role": "####",
  },
}));
const httpLink = createHttpLink({
  uri: httpEndpoint,
  headers: {
    "content-type": "application/json",
    "x-hasura-admin-secret": import.meta.env.####,
  },
});

const wsLink = new WebSocketLink({
  uri: `wss://####/v1/graphql`,
  options: {
    lazy:true,
    reconnect: true,
    connectionParams: {
      headers: {
        "x-hasura-user-id": localStorage.getItem("user")
          ? JSON.parse(localStorage.getItem("user")).id
          : null,
        "x-hasura-role": "####",
        
      },
    },
  },
});

const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  },
  wsLink,
  httpLink
);

const cache = new InMemoryCache();
const client = new ApolloClient({
  // Provide required constructor fields
  cache: cache,
  link: headerLink.concat(link),

  // Provide some optional constructor fields
  queryDeduplication: false,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: "cache-and-network",
    },
    query: {
      fetchPolicy: "no-cache",
    },
  },
});

export default client;

Subscription:

export const getAllProperties = async (projectId, status) => {
  const response = await graphqlClient.subscribe({
    query: gql`
    subscription {
      properties(where: {proyect_id: {_eq: "${projectId}"}, status: {_eq: ${status}}}, order_by: {level: asc}) {
        id
        base_plane
        bedrooms
        bathrooms
        reference
        price
        typology
        unit_name
        living_area
        level
        tower
        status
        reservation
      }
    } `,
  });
  return response;
};

Log:

Some idea to fix these?

Answer 1

I change library apollo-client to apollo/client it works now.