Subscriptions not working?

Dev Support
1

Trying to add a subscription that works fine in the API explorer but doesn’t work on neither my localhost nor prod environment.

here’s my query:

export const STOCK_SUBSCRIPTION = gql`
  subscription STOCK_SUBSCRIPTION($ticker: String!) {
    Stocks(filter: { node: { ticker: { equals: $ticker } } }) {
      node {
        latestPrice
        quote
      }
    }
  }
`

which gets called like this in my app:

  const { loading, error, data } = useSubscription(STOCK_SUBSCRIPTION, {
    variables: { ticker },
  })

This is using:
“@apollo/react-hooks”: “^3.1.3”,
“@apollo/react-ssr”: “^3.1.3”,

However when I run this I get the following error:

Error: GraphQL error: Subscribing over HTTP is not supported

This happens both when I am actually on HTTP localhost:3000, but also in my production environment which is running on HTTPS. :frowning:

Here’s the full request.

General

Request URL: https://api.8base.com/ck34xg5y400ft01l2c12e53x8
Request Method: POST
Status Code: 200 
Remote Address: 143.204.145.27:443
Referrer Policy: no-referrer-when-downgrade

Response headers:

access-control-allow-credentials: true
access-control-allow-headers: *
access-control-allow-origin: *
content-encoding: gzip
content-length: 156
content-type: application/json
date: Sat, 04 Apr 2020 17:45:40 GMT
status: 200
via: 1.1 2f5727cd85b40e905349d2b5268f3dbc.cloudfront.net (CloudFront)
x-amz-apigw-id: KeQmuFS1oAMFePQ=
x-amz-cf-id: oC2sdMRNyUvGgVOiaRrO-7-v594FkPoNdCnAnJo-EWepGlAs4_ebMg==
x-amz-cf-pop: EWR52-C2
x-amzn-requestid: 1dacd15e-9f73-404c-8e77-1916d5caf794
x-amzn-trace-id: Root=1-5e88c7c4-67b3abca3ef8aef04c43ac3a;Sampled=0
x-cache: Miss from cloudfront

Request headers

:authority: api.8base.com
:method: POST
:path: /ck34xg5y400ft01l2c12e53x8
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,da;q=0.8
authorization: Bearer xxxxxx-xxxx-xxxxxx-xxxxx-xxxxxxx
cache-control: no-cache
content-length: 282
content-type: application/json
origin: https://weeklystocktip.markl.now.sh
pragma: no-cache
referer: https://weeklystocktip.markl.now.sh/dashboard/stocktip
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.2 Safari/537.36

Request payload

operationName: "STOCK_SUBSCRIPTION"
query: "subscription STOCK_SUBSCRIPTION($ticker: String!) {↵  Stocks(filter: {node: {ticker: {equals: $ticker}}}) {↵    node {↵      latestPrice↵      quote↵      __typename↵    }↵    __typename↵  }↵}↵"
variables: {ticker: "NTIC"}
ticker: "NTIC"

Response

{"data":{"Stocks":null},"errors":[{"message":"Subscribing over HTTP is not supported","locations":[{"line":2,"column":3}],"path":["Stocks"],"code":"IllegalOperationError"}]}

I understand why it might not work locally when I’m on HTTP. but why wouldn’t this work over HTTPS???

My authToken is correct and all my normal queries are working fine. (this is the first time I’m using a Subscription with 8base)

2

@MarkLyck for working with subscriptions you should add SubscriptionLink from the @8base/apollo-links package to your Apollo Client. You can see an example here: https://github.com/8base/sdk/tree/master/packages/apollo-links

3

@vladimir.osipov

Thanks for the response!

I don’t use the 8base SDK stuff (not a huge fan of the 8base client implementation vs. normal apollo).

Is it really required to use the 8base implementation to get subscriptions to work and why does it need the users email??? my current Auth only needs the token. :frowning:

Would I be able to use this instead? https://github.com/apollographql/apollo-link/tree/master/packages/apollo-link-ws

Also in the example SubscriptionLink isn’t imported from anywhere. But I assume it would come from ‘@8base/apollo-links’

4

This solution helped me solve it: and thanks to @vladimir.osipov for pointing out it needed a SubscriptionLink to function.