Apollo 客户端递归突变

Question

下面的例子可以用 apollo-client 吗？

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

1. 没有互联网连接
2. （1.突变）创建一个新的待办事项
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);