可以使用Apollo客户端中的refetchQueries选项来手动更新分页查询。例如,在使用react-apollo的情况下,可以使用以下代码:
import { Query } from 'react-apollo';
import gql from 'graphql-tag';
const MY_QUERY = gql`
query MyQuery {
items {
id
name
}
}
`;
class MyComponent extends React.Component {
onNewItemAdded = () => {
this.props.client.mutate({
mutation: ADD_ITEM_MUTATION,
variables: {
name: 'New Item'
},
update: (cache, { data: { addItem } }) => {
const data = cache.readQuery({ query: MY_QUERY });
data.items.push(addItem);
cache.writeQuery({
query: MY_QUERY,
data
});
},
refetchQueries: [
{
query: MY_QUERY,
variables: {
limit: 5,
offset: 0
}
}
]
});
}
render() {
return (
{({ loading, error, data }) => {
// render your component here
}}
);
}
}
export default withApollo(MyComponent);
在上面的代码中,当添加了一个新项时,使用refetchQueries选项手动重新执行分页查询,以确保列表中新项被正确地显示。