利用 React Query 和数据库实现数据增量同步

import { useQuery, useMutation } from 'react-query';

function fetchData() {
  // 发起网络请求，获取数据
  return fetch('/api/data')
    .then(response => response.json())
    .then(data => data);
}

function updateData(data) {
  // 发起网络请求，修改数据
  return fetch('/api/data', {
    method: 'PUT',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json'
    }
  })
    .then(response => response.json())
    .then(updatedData => updatedData);
}

function App() {
  const { data } = useQuery('data', fetchData);
  const mutation = useMutation(updateData);

  const handleUpdate = newData => {
    // 调用 mutation.mutate 函数，更新数据
    mutation.mutate(newData);
  };

  return (
    <div>
      <button onClick={() => handleUpdate({})}>更新数据</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

import { useQuery, useMutation, queryCache, useQueryClient } from 'react-query';

function fetchTodos() {
  return axios.get('/api/todos')
    .then(response => response.data);
}

function addTodo(newTodo) {
  return axios.post('/api/todos', newTodo)
    .then(response => response.data);
}

function updateTodo(id, updatedTodo) {
  return axios.put(`/api/todos/${id}`, updatedTodo)
    .then(response => response.data);
}

function deleteTodo(id) {
  return axios.delete(`/api/todos/${id}`)
    .then(response => response.data);
}

function TodoList() {
  const { data: todos } = useQuery('todos', fetchTodos);
  const queryClient = useQueryClient();
  const mutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries('todos');
    }
  });

  const handleAddTodo = newTodo => {
    mutation.mutate(newTodo);
  };

  const handleUpdateTodo = (id, updatedTodo) => {
    updateTodo(id, updatedTodo)
      .then(() => queryClient.invalidateQueries('todos'));
  };

  const handleDeleteTodo = id => {
    deleteTodo(id)
      .then(() => queryClient.invalidateQueries('todos'));
  };

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault();
        handleAddTodo({
          text: e.target.elements.text.value
        });
        e.target.reset();
      }}>
        <input type="text" name="text" placeholder="输入待办事项" />
        <button type="submit">添加</button>
      </form>
      {todos && todos.map(todo => (
        <div key={todo.id}>
          <span>{todo.text}</span>
          <button onClick={() => handleUpdateTodo(todo.id, { completed: !todo.completed })}>
            {todo.completed ? '标为未完成' : '标为完成'}
          </button>
          <button onClick={() => handleDeleteTodo(todo.id)}>
            删除
          </button>
        </div>
      ))}
    </div>
  );
}