How to do graphql subscriptions with Absinthe (Elixir) and Urql?

Question

My idea was to build a client app using react and urql and a graphql api using elixir and absinthe but at the moment it looks as if these don't really play that well together.

Is there a way to actually use the Absinthe subscriptions with any other client than Apollo? I've tried to use urql but I fail with the ws connection getting the following error:

WebSocket connection to 'ws://localhost:4000/socket/websocket' failed: Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received

Only thing I've found so far which seems to be related to this issue is this library absinthe/socket-apollo-link (https://github.com/absinthe-graphql/absinthe-socket/tree/master/packages/socket-apollo-link) but it's obviously only for Apollo.

In my failed attempt I did the following:

import React from 'react'
import { Provider, Client, dedupExchange, fetchExchange, subscriptionExchange } from 'urql'
import { cacheExchange } from '@urql/exchange-graphcache'
import { SubscriptionClient } from 'subscriptions-transport-ws'

const DataProvider = ({ children }) => {
  const cache = cacheExchange({})
  const subscriptionClient = new SubscriptionClient('ws://localhost:4000/socket/websocket', {})
  const client = new Client({
    url: 'http://localhost:4000/api',
    exchanges: [
      dedupExchange,
      cache,
      fetchExchange,
      subscriptionExchange({
        forwardSubscription: operations => subscriptionClient.request(operations),
      }),
    ],
  })
  return <Provider value={client}>{children}</Provider>
}

export default DataProvider

This 'subscriptions-transport-ws' I found from a tutorial and that mysterious '/websocket' at the end of the ws url was mentioned in some gh issue but it seems to work (before adding that to the end of the url there was no ws connection at all).

score 1 · Answer 1 · answered Jun 03 '21 at 22:19

This doesn't directly answer the question, but in case someone ends up with the same confusion and as a response to your comment here:

I found from a tutorial and that mysterious '/websocket' at the end of the ws url was mentioned in some gh issue but it seems to work (before adding that to the end of the url there was no ws connection at all).

This is due to both longpoll and websocket being viable transports. You likely had your socket defined in your Endpoint with websocket: true which gave you that route. Running mix phx.routes | grep socket would have been a helpful command.

score 0 · Answer 2 · answered May 20 '20 at 00:00

This is obviously a late reply, but I'll try my best anyway. It seems that Absinthe has an alternative client library that's different from subscriptions-transport-ws, notably it's here: https://github.com/absinthe-graphql/absinthe-socket/blob/master/packages/socket-apollo-link/src/createAbsintheSocketLink.js#L8

If you integrate with this library instead then presumably it'll work. So that means you likely have to integrate with PhoenixSocket instead, as shown here: https://github.com/absinthe-graphql/absinthe-socket/tree/master/packages/socket-apollo-link#examples

How to do graphql subscriptions with Absinthe (Elixir) and Urql?

2 Answers2