Apollo的subscribeToMore变量不必与初始查询完全匹配。但是,它们必须具有相同的类型签名和返回值类型。
下面是一个示例,展示了如何使用Apollo的subscribeToMore变量:
import { gql, useQuery } from '@apollo/client';
const GET_MESSAGES = gql`
query GetMessages {
messages {
id
content
}
}
`;
const MESSAGE_SUBSCRIPTION = gql`
subscription OnNewMessage {
newMessage {
id
content
}
}
`;
function MessageList() {
const { loading, data, subscribeToMore } = useQuery(GET_MESSAGES);
// 订阅新消息
useEffect(() => {
const unsubscribe = subscribeToMore({
document: MESSAGE_SUBSCRIPTION,
updateQuery: (prev, { subscriptionData }) => {
if (!subscriptionData.data) return prev;
const newMessage = subscriptionData.data.newMessage;
return Object.assign({}, prev, {
messages: [...prev.messages, newMessage],
});
},
});
return () => unsubscribe();
}, [subscribeToMore]);
if (loading) return Loading...
;
return (
{data.messages.map((message) => (
- {message.content}
))}
);
}
export default MessageList;
在上面的示例中,使用了Apollo的useQuery钩子来获取初始消息列表。然后,使用subscribeToMore来订阅新的消息。在updateQuery函数中,将新的消息添加到现有的消息列表中,并返回更新后的数据。