1

次の例は apollo-client で可能ですか?

簡単な ToDo アプリケーションと悪いインターネット接続の例:

  1. インターネット接続なし
  2. (1.突然変異) 新しい todo を作成する
  3. (1. 突然変異 => 楽観的更新) 新しい todo を表示 (ローカル tmp-ID)
  4. (2.mutation) 新しい todo が完了したことを確認します (tmp-ID を使用)
  5. (2. 突然変異 => 楽観的更新) todo を完了済みとして表示
  6. サーバーに接続されました
  7. ???

Apollo クライアントは正しい todo の tmp-ID を置き換えることができますか、または手動で行うにはどうすればよいですか?

4

1 に答える 1

0

これを試すことはできますが、一時的な ID で completeTodo ミューテーションを送信しているため、サーバー上で true の完了ステータスを保持できるとは思いません。これで、参照している todo をサーバーが知る方法ができました。これにより、必要に応じて2つの楽観的な更新が得られる場合があります.

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);
于 2017-09-19T05:52:58.477 に答える