How to use subscriptions?

[christiaanwesterbeek]

I want to start using postgraphile's simple subscriptions, so that I can have my frontend by notified about events in the database. That means that I must able to submit from my frontend a graphql subscription like the following for example.

subscription {
  listen(topic: "hello") {
    relatedNodeId
    relatedNode {
      nodeId
      ... on Foo {
        id
        title
      }
    }
  }
}

I have found noticed that subscriptions seem kind of disabled here:

ra-postgraphile/src/__test_utils/GraphileLink.ts

Lines 27 to 33 in 1f76548

	/* Only do queries (not subscriptions) */
	if (!op || op.operation === 'subscription') {
	if (!observer.closed) {
	observer.complete()
	}
	return
	}

I have been using react-admin for a long time, and I just noticed the following remark in its documentation.

Tip: A Data Provider can have more methods than the 9 methods listed above. For instance, you create a dataProvider with custom methods for calling non-REST API endpoints, manipulating tree structures, subscribing to real time updates, etc.

That got me thinking, that even though ra-postgraphile is not supporting subscriptions right now, we may still be able to customize it. There are a few "ingredients" I'm thinking of. One is using a decorator (like I sometime do for altering params)...

import React, { useEffect, useState } from 'react'
import { Admin, Resource } from 'react-admin'
import { useApolloClient } from '@apollo/react-hooks'
import pgDataProvider from 'ra-postgraphile'

const decorator = (dataProvider: DataProvider) => ({
  ...dataProvider,
  subscribe: (resource, params) => {
    // create the grapghql subscription here maybe and submit that?
  }
});

const App = () => {
  const [dataProvider, setDataProvider] = useState(null)
  const client = useApolloClient()

  useEffect(() => {
    ;(async () => {
      const dataProvider = await pgDataProvider(client)
      setDataProvider(() => decorator(dataProvider))
    })()
  }, [])

  return (
    dataProvider && (
      <Admin dataProvider={dataProvider}>
        ...
      </Admin>
    )
  )
}

export default App

The other that I may be able to use the apollo client directly, but I haven't done that before.

Can you help me out thinking of a way how?