Apollo 클라이언트 재귀 변형

Question

다음 예제는 apollo-client에서 가능합니까?

1. 인터넷에 연결되어 있지 않음
2. (1 돌연변이) 새로운 할 일을 만들
3. (1 돌연변이 => 갱신 중) 쇼 : 예를 들어 쉽게 할일 응용 프로그램과 나쁜 인터넷 연결

4. (2 돌연변이 => 갱신 중) 쇼 TODO합니다 (TMP-ID로) 완료로
완료로 새로운 할 일 (현지 TMP-ID)
5. (2 돌연변이는) 새로운 할 일을 확인
6. 지금 서버에 연결
7. ???

아폴로 클라이언트가 올바른 할일을 위해 tmp-ID를 바꿀 수 있습니까? 아니면 어떻게 수동으로 할 수 있습니까?

Answer 1

시도해 볼 수는 있지만 임시 ID를 사용하여 completeTodo 변이를 보내므로 서버에서 완료 상태 인 true를 유지할 수 있다고 생각하지 않습니다. 이제 서버가 참조 할 작업 내용을 서버가 알 수있는 방법이 있습니다. 이것은 당신에게 당신이 원하는대로 두 낙관적 인 업데이 트를 줄 수 있지만.

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);