Apollo 客户端递归突变

Posted 2023-03-10

【中文标题】Apollo 客户端递归突变

【英文标题】：Apollo client recursive mutations

【发布时间】：2017-09-06 15:57:48

【问题描述】：

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

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

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

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

【参考方案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);