Relay Modern:将websocket连接到网络层

Question

我在解决如何将Relay Modern网络层与我的websocket实例连接时遇到了问题.

我目前正在实例化一个websocket实例:

const subscriptionWebSocket = new ReconnectingWebSocket('ws://url.url/ws/subscriptions/', null, options);

我正在指定订阅并创建一个新实例requestSubscription:

const subscription = graphql`
  subscription mainSubscription {
    testData {
      anotherNode {
        data
      }
    }
  }
`;

requestSubscription(
  environment,
  {
    subscription,
    variables: {},
    onComplete: () => {...},
    onError: (error) => {...},
    onNext: (response) => {...},
    updater: (updaterStoreConfig) => {...},
  },
);

然后允许我发送任何订阅请求:

function subscriptionHandler(subscriptionConfig, variables, cacheConfig, observer) {
  subscriptionWebSocket.send(JSON.stringify(subscriptionConfig.text));

  return {
    dispose: () => {
      console.log('subscriptionHandler: Disposing subscription');
    },
  };
}

const network = Network.create(fetchQuery, subscriptionHandler);

通过我的服务器(目前使用Graphene-python),我能够解释服务器上收到的消息.

但是,我遇到的问题是如何回应订阅; 例如,当我的数据库中的某些内容发生变化时,我想生成响应并返回给任何潜在订阅者.

问题是,如何将我的websocket实例中的onMessage事件连接到我的中继现代网络层？我已经浏览了继电器的来源,但似乎无法弄清楚回调是什么,或者应该采用什么方法实现onreceive.

任何提示都表示赞赏.

Answer 1

我已经成功订阅了Relay Modern的作品,并希望分享我的最小设置,也许它对某人有帮助!

请注意,我没有使用,WebSocket但SubscriptionClient可以找到subscriptions-transport-ws管理与服务器的连接.

这是我的最小设置代码:

Environment.js

import { SubscriptionClient } from 'subscriptions-transport-ws'
const {
  Environment,
  Network,
  RecordSource,
  Store,
} = require('relay-runtime')
const store = new Store(new RecordSource())


const fetchQuery = (operation, variables) => {
  return fetch('https://api.graph.cool/relay/v1/__GRAPHCOOL_PROJECT_ID__', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  }).then(response => {
    return response.json()
  })
}

const websocketURL = 'wss://subscriptions.graph.cool/v1/__GRAPHCOOL_PROJECT_ID__'

function setupSubscription(
  config,
  variables,
  cacheConfig,
  observer,
) {
  const query = config.text

  const subscriptionClient = new SubscriptionClient(websocketURL, {reconnect: true})
  const id = subscriptionClient.subscribe({query, variables}, (error, result) => {
    observer.onNext({data: result})
  })
}

const network = Network.create(fetchQuery, setupSubscription)
const environment = new Environment({
  network,
  store,
})

export default environment

NewLinkSubscription.js

import {
  graphql,
  requestSubscription
} from 'react-relay'
import environment from '../Environment'

const newLinkSubscription = graphql`
  subscription NewLinkSubscription {
    Link {
      mutation
      node {
        id
        description
        url
        createdAt
        postedBy {
          id
          name
        }
      }
    }
  }
`

export default (onNext, onError, onCompleted, updater) => {

  const subscriptionConfig = {
    subscription: newLinkSubscription,
    variables: {},
    onError,
    onNext,
    onCompleted,
    updater
  }

  requestSubscription(
    environment,
    subscriptionConfig
  )

}

现在您只需使用导出的函数进行订阅即可.例如,在我的一个React组件中,componentDidMount我现在可以执行以下操作:

componentDidMount() {
  NewLinkSubscription(
    response => console.log(`Received data: `, response),
    error => console.log(`An error occurred:`, error),
    () => console.log(`Completed`)
  )
}

请注意,SubscriptionClient只有在服务器实现此协议时才能使用!

如果您想了解更多信息,请查看fullstack 如何使用GraphQL教程,该教程详细描述了如何使用Relay Modern进行订阅.