I get todo list with useQuery.

const { data, refetch } = useQuery(GET_TODOS);

After creating a todo, I get todo list with refetch like below.

const [ addTodo ] = useMutation(ADD_TODO, {
  onComplete: () => refetch()
});

const handleAddTodo = useCallback((todoArgs) => {
  addTodo({ variables: todoArgs });
}, []);

But It is obviously wasted time.

I tried to update only in an updated part. for that, I saved todos into a state and I changed this.

const [todos, setTodos] = useState([]);

...

const [ addTodo ] = useMutation(ADD_TODO, {
  onComplete: (updatedData) => {
    setTodos((prevTodos) => {
      const newTodos = prevTodos.map((todo) => todo.id === updatedData.id ? updatedData : todo);
      return newTodos;
    });
  }
}

...

useEffect(() => {
  setTodos(data);
}, [data]);

...

But I'm not sure It is a right way. I think there may be an official way for updating a part of data.

What's the best way to fetch a partial data after Creating, Updating, Deleting?

I'm using 'no-cache' as a default option in the project.