AppSync subscriptions with ApolloClient in React

I’m currently using ApolloClient to connect to an AppSync GraphQL API. It all works perfectly for queries and mutations, but I’m having some trouble getting subscriptions to work. I’ve followed the Apollo docs and my App.js looks like this:

import React from 'react';
import './App.css';
import { ApolloClient } from 'apollo-client';
import { ApolloProvider } from '@apollo/react-hooks';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink, split } from 'apollo-link';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import { createAuthLink } from 'aws-appsync-auth-link';
import { createHttpLink } from 'apollo-link-http';
import AWSAppSyncClient, { AUTH_TYPE } from "aws-appsync";
import { useSubscription } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

const url = "https://xxx.appsync-api.eu-west-2.amazonaws.com/graphql"
const realtime_url = "wss://xxx.appsync-realtime-api.eu-west-2.amazonaws.com/graphql"
const region = "eu-west-2";
const auth = {
  type: AUTH_TYPE.API_KEY,
  apiKey: process.env.REACT_APP_API_KEY
};

const wsLink = new WebSocketLink({
  uri: realtime_url,
  options: {
    reconnect: true
  },
});

const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  ApolloLink.from([
     createAuthLink({ realtime_url, region, auth }), 
     wsLink
  ]),
  ApolloLink.from([
     createAuthLink({ url, region, auth }), 
     createHttpLink({ uri: url })
  ])
);

const client = new ApolloClient({
  link: link,
  cache: new InMemoryCache({
    dataIdFromObject: object => object.id,
  }),
});

function Page() {
  const { loading, error, data } = useSubscription(
    gql`
      subscription questionReleased {
        questionReleased {
          id
          released_date
        }
      }
    `
  )

  if (loading) return <span>Loading...</span>
  if (error) return <span>Error!</span>
  if (data) console.log(data)

  return (
    <div>{data}</div>
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <Page />
      </div>
    </ApolloProvider>
  );
}

export default App;

If I go to the network tab in web inspector, I can see the request:

wss://xxx.appsync-realtime-api.eu-west-2.amazonaws.com/graphql

And the messages:

{"type":"connection_init","payload":{}}
{"id":"1","type":"start","payload":{"variables":{},"extensions":{},"operationName":"questionReleased","query":"subscription questionReleased {n  questionReleased {n    idn    released_daten    __typenamen  }n}n"}}
{"id":"2","type":"start","payload":{"variables":{},"extensions":{},"operationName":"questionReleased","query":"subscription questionReleased {n  questionReleased {n    idn    released_daten    __typenamen  }n}n"}}
{"payload":{"errors":[{"message":"Both, the "header", and the "payload" query string parameters are missing","errorCode":400}]},"type":"connection_error"}

I’ve searched around a lot and it seems that ApolloClient may not be compatible with AppSync subscriptions – is anybody able to confirm this?

So as an alternative I’ve tried to use AWSAppSyncClient for subscriptions:

function Page() {
  const aws_client = new AWSAppSyncClient({
    region: "eu-west-2",
    url: realtime_url,
    auth: {
      type: AUTH_TYPE.API_KEY,
      apiKey: process.env.REACT_APP_API_KEY
    },
    disableOffline: true
  });

  const { loading, error, data } = useSubscription(
    gql`
      subscription questionReleased {
        questionReleased {
          id
          released_date
        }
      }
    `,
    {client: aws_client}
  )

  if (loading) return <span>Loading...</span>
  if (error) return <span>Error!</span>
  if (data) console.log(data)

  return (
    <div>{data}</div>
  );
}

It now sends querystrings with the request:

wss://xxx.appsync-realtime-api.eu-west-2.amazonaws.com/graphql?header=eyJob3N0I...&payload=e30=

And I now get a different error:

{"type":"connection_init"}
{"payload":{"errors":[{"errorType":"HttpNotFoundException"}]},"type":"connection_error"}

I’ve double checked the url and it’s ok (if it’s not you get ERR_NAME_NOT_RESOLVED). The subscription works when I run it manually through the AppSync console, so that should also be ok.

I’ve also tried .hydrated() on the aws_client but get another error (TypeError: this.refreshClient(...).client.subscribe is not a function)

What am I doing wrong? This has been driving me nuts for a few days!