[英]The react apollo useSubscription hook doesn't work in a function call but works when the same call is assigned to a variable
I am working with apollo graphql client.我正在与阿波罗 graphql 客户合作。 The subscription in the server is working fine watching for changes.
服务器中的订阅工作正常,可以观察变化。
But in the client, I am not able to log data.但是在客户端,我无法记录数据。 I also tried to mutate but still its resulting in the same thing.
我也尝试过变异,但结果还是一样。
useSubscription(BOOK_ADDED, {
onData: ({ data }) => {
console.log(data)
}
})
The above code doesn't log anything out.上面的代码没有记录任何东西。
But,但,
const value = useSubscription(BOOK_ADDED, {
onData: ({ data }) => {
console.log(data)
}
})
console.log(value)
The above code seems to work fine logging out a value.上面的代码似乎可以很好地注销一个值。
I am attaching a few codes below for more clarity.为了更清楚起见,我在下面附上了一些代码。
index.js or apollo setup: index.js 或 apollo 设置:
import ReactDOM from 'react-dom'
import App from './App'
import {
ApolloClient,
ApolloProvider,
HttpLink,
InMemoryCache,
split,
} from '@apollo/client'
import { setContext } from '@apollo/client/link/context'
import { getMainDefinition } from '@apollo/client/utilities'
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'
import Assess from './Asses'
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem('library-user-token')
return {
headers: {
...headers,
authorization: token ? `bearer ${token}` : null,
},
}
})
const httpLink = new HttpLink({ uri: 'http://localhost:4002' })
const wsLink = new GraphQLWsLink(
createClient({
url: 'ws://localhost:4002',
})
)
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query)
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
)
},
wsLink,
authLink.concat(httpLink)
)
const client = new ApolloClient({
cache: new InMemoryCache(),
link: splitLink,
})
ReactDOM.render(
<ApolloProvider client={client}>
<Assess />
</ApolloProvider>,
document.getElementById('root')
)
App.js应用程序.js
//App.js
import { useSubscription, useQuery } from "@apollo/client";
import { ALL_BOOKS, BOOK_ADDED } from "./queries";
const App = () => {
console.log(BOOK_ADDED);
const result = useQuery(ALL_BOOKS);
useSubscription(BOOK_ADDED, {
onData: ({ data }) => {
console.log(data);
},
});
console.log(result)
if(result.loading){
return null
}
return (
<div>
{result?.data?.allBooks.map((r) => (
<li key={r.id}>{r.title}</li>
))}
</div>
);
};
export default App
The query and fragment:查询和片段:
const BOOK_DETAILS = gql`
fragment BookDetails on Books {
title
author {
name
}
published
genres
id
}
`;
export const BOOK_ADDED = gql`
subscription {
bookAdded {
...BookDetails
}
}
${BOOK_DETAILS}
`;
After reading the changelogs of @apollo/client.在阅读了@apollo/client 的变更日志之后。 I got to know that the method demonstrated in question is only useful when the version of @apollo/client is >=3.7.0.
我了解到,所讨论的方法仅在@apollo/client 的版本 >=3.7.0 时才有用。 As my version was @3.6.7 it wasn't logging the value out.
由于我的版本是 @3.6.7,所以它没有记录值。
Earlier than this version the function required an onSubscriptionData callback to perform the same operation, which is now deprecated.在此版本之前,function 需要 onSubscriptionData 回调来执行相同的操作,现在已弃用。 I have still demonstrated it below as someone using version <@3.7.0 might find it useful.
我仍然在下面进行了演示,因为使用版本 <@3.7.0 的人可能会发现它很有用。
useSubscription(BOOK_ADDED,{
onSubscriptionData: ({subscriptionData: data}) =>{
console.log(data)
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.