可以使用Apollo Client的watchQuery方法来监听数据变化,然后手动更新组件的state。以下是一个简单的示例:
import { gql, useQuery } from '@apollo/client';
const GET_BOOKS = gql`
query GetBooks {
books {
id
title
author
}
}
`;
function BookList() {
const { data } = useQuery(GET_BOOKS);
return (
{data?.books.map((book) => (
-
{book.title}, by {book.author}
))}
);
}
class BookListContainer extends React.Component {
state = { forceUpdate: false };
handleUpdate = () => {
this.setState({ forceUpdate: !this.state.forceUpdate });
};
render() {
return (
<>
>
);
}
}
在这个示例中,我们使用useQuery
钩子来获取图书列表数据。然后,在BookListContainer
组件中,我们手动添加一个按钮来强制重新渲染组件。当我们点击按钮时,组件的state会被更新,因此BookList
组件也会重新渲染并从服务器获取最新数据。
另外,还可以使用refetch
或refetchQueries
选项来刷新数据。具体方法可以参考Apollo Client的文档。