我正在尝试按照本教程中的如何 GraphQL 设置 graphcool 订阅/websockets,但我收到以下消息:
WebSocket 连接到 “wss://subscriptions.graph.cool/v1/###”失败: WebSocket 在连接建立之前关闭。
我似乎已经按照教程准备好了一切。你知道为什么 websockets 连接没有建立吗?
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import registerServiceWorker from './registerServiceWorker'
import './styles/index.css'
import { ApolloProvider, createNetworkInterface, ApolloClient } from 'react-apollo'
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'
import { BrowserRouter } from 'react-router-dom'
import { GC_AUTH_TOKEN } from './constants'
const networkInterface = createNetworkInterface({
uri: 'https://api.graph.cool/simple/v1/###'
})
const wsClient = new SubscriptionClient('wss://subscriptions.graph.cool/v1/###', {
reconnect: true,
connectionParams: {
authToken: localStorage.getItem(GC_AUTH_TOKEN),
}
})
const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
networkInterface,
wsClient
)
networkInterface.use([{
applyMiddleware(req, next) {
if (!req.options.headers) {
req.options.headers = {}
}
const token = localStorage.getItem(GC_AUTH_TOKEN)
req.options.headers.authorization = token ? `Bearer ${token}` : null
next()
}
}])
const client = new ApolloClient({
networkInterface: networkInterfaceWithSubscriptions
})
ReactDOM.render(
<BrowserRouter>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</BrowserRouter>
, document.getElementById('root')
)
registerServiceWorker()
应用程序.js
import React, { Component } from 'react'
import LinkList from './LinkList'
import CreateLink from './CreateLink'
import Header from './Header'
import Login from './Login'
import Search from './Search'
import { Switch, Route, Redirect } from 'react-router-dom'
class App extends Component {
render() {
return (
<div className='center w85'>
<Header />
<div className='ph3 pv1 background-gray'>
<Switch>
<Route exact path='/search' component={Search}/>
<Route exact path='/' component={LinkList}/>
<Route exact path='/create' component={CreateLink}/>
<Route exact path='/login' component={Login}/>
</Switch>
</div>
</div>
)
}
}
export default App
LinkList.js
import React, { Component } from 'react'
import Link from './Link'
import { graphql, gql } from 'react-apollo'
class LinkList extends Component {
_updateCacheAfterVote = (store, createVote, linkId) => {
const data = store.readQuery({ query: ALL_LINKS_QUERY })
const votedLink = data.allLinks.find(link => link.id === linkId)
votedLink.votes = createVote.link.votes
store.writeQuery({ query: ALL_LINKS_QUERY, data })
}
componentDidMount() {
this._subscribeToNewLinks()
this._subscribeToNewVotes()
}
render() {
if (this.props.allLinksQuery && this.props.allLinksQuery.loading) {
return <div>Loading</div>
}
if (this.props.allLinksQuery && this.props.allLinksQuery.error) {
return <div>Error</div>
}
const linksToRender = this.props.allLinksQuery.allLinks
return (
<div>
{linksToRender.map((link, index) => (
<Link key={link.id} updateStoreAfterVote={this._updateCacheAfterVote} index={index} link={link}/>
))}
</div>
)
}
_subscribeToNewLinks = () => {
this.props.allLinksQuery.subscribeToMore({
document: gql`
subscription {
Link(filter: {
mutation_in: [CREATED]
}) {
node {
id
url
description
createdAt
postedBy {
id
name
}
votes {
id
user {
id
}
}
}
}
}
`,
updateQuery: (previous, { subscriptionData }) => {
const newAllLinks = [
subscriptionData.data.Link.node,
...previous.allLinks
]
const result = {
...previous,
allLinks: newAllLinks
}
return result
}
})
}
_subscribeToNewVotes = () => {
this.props.allLinksQuery.subscribeToMore({
document: gql`
subscription {
Vote(filter: {
mutation_in: [CREATED]
}) {
node {
id
link {
id
url
description
createdAt
postedBy {
id
name
}
votes {
id
user {
id
}
}
}
user {
id
}
}
}
}
`,
updateQuery: (previous, { subscriptionData }) => {
const votedLinkIndex = previous.allLinks.findIndex(link => link.id === subscriptionData.data.Vote.node.link.id)
const link = subscriptionData.data.Vote.node.link
const newAllLinks = previous.allLinks.slice()
newAllLinks[votedLinkIndex] = link
const result = {
...previous,
allLinks: newAllLinks
}
return result
}
})
}
}
export const ALL_LINKS_QUERY = gql`
query AllLinksQuery {
allLinks {
id
createdAt
url
description
postedBy {
id
name
}
votes {
id
user {
id
}
}
}
}
`
export default graphql(ALL_LINKS_QUERY, { name: 'allLinksQuery' }) (LinkList)
您能否将
timeout
参数添加到您的客户端配置中,如下所示:
const wsClient = new SubscriptionClient('wss://subscriptions.graph.cool/v1/###', {
reconnect: true,
timeout: 30000,
connectionParams: {
authToken: localStorage.getItem(GC_AUTH_TOKEN),
}
})
subscription-transport-ws
客户端实现和Graphcool订阅服务器实现之间在处理保持活动的方式上存在轻微的不匹配,长超时期限修复了它。
阅读 GitHub 上的此问题 和 此 Graphcool 功能请求,了解更多背景信息。
事实证明,Websocket 端点不正确,并且亚太地区有所不同
wss://subscriptions.ap-northeast-1.graph.cool/v1/###
就我而言,我使用的是
wss://domain.com/graphql
,而我的 websocket 服务器不安全,所以我必须将其更改为 ws://domain.com/graphql
我能够使用
lazy: true
选项修复我的问题。
reconnect: true,
lazy: true, // <--- This
connectionParams: {
// ...
},