reactjs - 继电器现代: Connecting websocket to network layer

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，而是使用 subscriptions-transport-ws 中的 SubscriptionClient。管理与服务器的连接。

这是我的最小设置代码:

环境.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
  )

}

现在您可以简单地使用导出的函数来订阅。例如，在 componentDidMount 中的一个 React 组件中，我现在可以执行以下操作:

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

请注意，仅当您的服务器实现 this 时才能使用 SubscriptionClient协议(protocol)!

如果您想了解更多信息，请查看全栈 How to GraphQL tutorial详细描述了如何使订阅与 Relay Modern 一起使用。