offline - Apollo 客户端递归突变

Question

apollo-client 可以使用以下示例吗？

例如，一个简单的 ToDo 应用程序和糟糕的互联网连接：

1. 没有网络连接
2. (1.mutation)创建一个新的todo
3. (1. mutation => 乐观更新) 显示新的 todo (local tmp-ID)
4. （2. 突变）检查新的待办事项是否已完成（使用 tmp-ID）
5. (2. 变异 => 乐观更新) 将待办事项显示为已完成
6. 现在连接到服务器
7. ？？？

Apollo 客户端可以将 tmp-ID 替换为正确的待办事项，或者我该如何手动完成？

Answer 1

你可以试试这个，但我认为你不能在你的服务器上保留 true 的完成状态，因为你正在发送一个带有临时 id 的 completeTodo 突变。现在，您的服务器可以知道您正在引用哪个待办事项。尽管这可能会根据需要为您提供两个乐观的更新。

const CREATE_TODO_MUTATION = gql`
  mutation createTodo($todoContent: String!) {
    createTodo(todoContent: $todoContent) {
      id
      createdAt
      content
      completed
    }
  }
`;

const COMPLETE_TODO_MUTATION = gql`
  mutation completeTodo($id: String!) {
    completeTodo(id: $id) {
      id
      createdAt
      content
      completed
    }
  }
`;

const TodosPageWithMutations = compose(
  graphql(CREATE_TODO_MUTATION, {
    props: ({ ownProps, mutate }) => ({
      createTodo: content => mutate({
        variables: { todoContent: content },
        optimisticResponse: {
          __typename: 'Mutation',
          createTodo: {
            __typename: 'Todo',
            id: createTempID(),
            content,
            completed: false,
            createdAt: new Date()
          }
        }
      }),
    }),
  }),
  graphql(COMPLETE_TODO_MUTATION, {
    props: ({ ownProps, mutate }) => ({
      completeTodo: todo => mutate({
        variables: { id: todo.id },
        optimisticResponse: {
          __typename: 'Mutation',
          completeTodo: {
            __typename: 'Todo',
            id: todo.id,
            content: todo.content,
            completed: true,
            createdAt: todo.createdAt
          }
        }
      }),
    }),
  })
)(TodosPage);