如何从React中的Apollo订阅组件刷新查询/缓存

import React from 'react';
import { useSubscription, useQuery } from '@apollo/client';
import { gql } from '@apollo/client';

const SUBSCRIPTION = gql`
  subscription {
    newPost {
      id
      title
      content
    }
  }
`;

const QUERY = gql`
  query {
    posts {
      id
      title
      content
    }
  }
`;

const PostList = () => {
  const { data } = useSubscription(SUBSCRIPTION);
  const { refetch } = useQuery(QUERY);

  const handleSubscriptionData = () => {
    // 处理订阅数据更新
    // 读取缓存数据并更新
    const cachedData = client.readQuery({ query: QUERY });
    const updatedData = {
      posts: [...cachedData.posts, data.newPost],
    };
    client.writeQuery({ query: QUERY, data: updatedData });
  };

  const handleRefresh = () => {
    // 手动刷新查询
    refetch();
  };

  return (
    <div>
      <button onClick={handleRefresh}>刷新查询</button>
      <ul>
        {data && data.newPost && (
          <li key={data.newPost.id}>
            <h3>{data.newPost.title}</h3>
            <p>{data.newPost.content}</p>
          </li>
        )}
      </ul>
    </div>
  );
};

export default PostList;