在Apollo Client中,refetchQueries
和onCompleted
都是用于处理数据更新的回调函数。refetchQueries
用于重新发起查询请求以获取最新的数据,而onCompleted
用于在查询完成后执行一些操作。在一次查询完成后,这两个回调函数的执行顺序是onCompleted
先执行,然后是refetchQueries
。
下面是一个示例代码,展示了如何使用refetchQueries
和onCompleted
:
import { useMutation, gql } from '@apollo/client';
const UPDATE_TODO = gql`
mutation UpdateTodo($id: ID!, $input: TodoInput!) {
updateTodo(id: $id, input: $input) {
id
title
completed
}
}
`;
const Todos = () => {
const [updateTodo, { loading }] = useMutation(UPDATE_TODO, {
onCompleted: () => {
console.log('onCompleted executed');
},
refetchQueries: ['GetTodos'],
});
const handleUpdateTodo = () => {
updateTodo({
variables: {
id: '1',
input: {
title: 'Updated Todo',
completed: true,
},
},
});
};
return (
);
};
export default Todos;
在这个示例中,当点击“Update Todo”按钮时,会触发handleUpdateTodo
函数,该函数调用updateTodo
方法执行UPDATE_TODO
mutation。在mutation完成后,onCompleted
回调函数会被触发,打印出"onCompleted executed"。然后,refetchQueries
会重新发起名为"GetTodos"的查询请求,以获取最新的todo数据。
总结起来,onCompleted
回调函数会在mutation完成后执行,而refetchQueries
会在onCompleted
之后执行,用于重新发起查询请求。