在 Apollo GraphQL 中,可以使用 useSubscription
hook 来订阅 GraphQL 的数据更新。使用 onSubscriptionData
参数可以在数据更新时执行自定义逻辑。
下面是一个示例,展示了如何使用 useSubscription
hook 和 onSubscriptionData
参数:
import { useSubscription, gql } from '@apollo/client';
const SUBSCRIPTION = gql`
subscription MySubscription {
newPost {
id
title
content
}
}
`;
function MyComponent() {
const { data, loading, error } = useSubscription(SUBSCRIPTION, {
onSubscriptionData: ({ client, subscriptionData }) => {
console.log('Received new data:', subscriptionData);
// 执行其他逻辑,比如更新本地缓存或者触发其他操作
},
});
if (loading) {
return Loading...;
}
if (error) {
return Error: {error.message};
}
return (
{data && data.newPost && (
{data.newPost.title}
{data.newPost.content}
)}
);
}
export default MyComponent;
在上面的示例中,我们定义了一个 SUBSCRIPTION
常量,它包含了订阅的 GraphQL 查询。然后,在 MyComponent
组件中使用 useSubscription
hook 来订阅该查询,并传入 onSubscriptionData
参数。当订阅的数据更新时,onSubscriptionData
回调函数会被触发,我们可以在该函数中执行自定义的逻辑,比如打印新数据或者更新本地缓存。
在组件的渲染部分,我们根据数据的加载状态和错误状态进行条件渲染。当数据加载完成且没有错误时,我们展示新数据的标题和内容。
请注意,上述代码使用了 @apollo/client
包中的相关导入,确保你已经安装了 @apollo/client
并正确进行了导入。