TypeScript react-relay.commitMutation函數代碼示例

function commit(
  environment: Environment,
  todos: TodoListFooter_viewer["todos"],
  user: TodoListFooter_viewer,
) {
  return commitMutation(
    environment,
    {
      mutation,
      variables: {
        input: {},
      },
      updater: (store) => {
        const payload = store.getRootField('removeCompletedTodos')!;
        sharedUpdater(store, user, payload.getValue('deletedTodoIds'));
      },
      optimisticUpdater: (store) => {
        if (todos && todos.edges) {
          const deletedIDs = todos.edges
            .filter(edge => edge!.node!.complete)
            .map(edge => edge!.node!.id);
          sharedUpdater(store, user, deletedIDs);
        }
      },
    }
  );
}

export function updateConversation(
  environment: Environment,
  conversation: Conversation,
  fromLastViewedMessageId: string,
  onCompleted: MutationConfig<any>["onCompleted"],
  onError: MutationConfig<any>["onError"]
) {
  return commitMutation<UpdateConversationMutation>(environment, {
    updater: store => {
      store.get(conversation.__id).setValue(false, "unread")
    },
    onCompleted,
    onError,
    mutation: graphql`
      mutation UpdateConversationMutation($input: UpdateConversationMutationInput!) {
        updateConversation(input: $input) {
          conversation {
            id
            from_last_viewed_message_id
          }
        }
      }
    `,
    variables: {
      input: {
        conversationId: conversation.id,
        fromLastViewedMessageId,
      },
    },
  })
}

function commit(
  environment: Environment,
  text: string,
  todo: Todo_todo,
) {
  return commitMutation(
    environment,
    {
      mutation,
      variables: {
        input: {text, id: todo.id},
      },
      optimisticResponse: getOptimisticResponse(text, todo),
    }
  );
}

function commit(
  environment: Environment,
  complete: boolean,
  todo: Todo_todo,
  user: Todo_viewer,
) {
  return commitMutation(
    environment,
    {
      mutation,
      variables: {
        input: {complete, id: todo.id},
      },
      optimisticResponse: getOptimisticResponse(complete, todo, user),
    }
  );
}

function commit(
  environment: Environment,
  complete: boolean,
  todos: TodoList_viewer["todos"],
  user: TodoList_viewer,
) {
  return commitMutation(
    environment,
    {
      mutation,
      variables: {
        input: {complete},
      },
      optimisticResponse: getOptimisticResponse(complete, todos, user),
    }
  );
}

function commit(
  environment: Environment,
  text: string,
  user: TodoApp_viewer,
) {
  return commitMutation(
    environment,
    {
      mutation,
      variables: {
        input: {
          text,
          clientMutationId: tempID++,
        },
      },
      updater: (store) => {
        const payload = store.getRootField('addTodo')!;
        const newEdge = payload.getLinkedRecord('todoEdge');
        sharedUpdater(store, user, newEdge);
      },
      optimisticUpdater: (store) => {
        const id = 'client:newTodo:' + tempID++;
        const node = store.create(id, 'Todo');
        node.setValue(text, 'text');
        node.setValue(id, 'id');
        const newEdge = store.create(
          'client:newEdge:' + tempID++,
          'TodoEdge',
        );
        newEdge.setLinkedRecord(node, 'node');
        sharedUpdater(store, user, newEdge);
        const userProxy = store.get(user.id)!;
        userProxy.setValue(
          userProxy.getValue('totalCount') + 1,
          'totalCount',
        );
      },
    }
  );
}

function commit(
  environment: Environment,
  todo: Todo_todo,
  user: Todo_viewer,
) {
  return commitMutation(
    environment,
    {
      mutation,
      variables: {
        input: {id: todo.id},
      },
      updater: (store) => {
        const payload = store.getRootField('removeTodo')!;
        sharedUpdater(store, user, payload.getValue('deletedTodoId'));
      },
      optimisticUpdater: (store) => {
        sharedUpdater(store, user, todo.id);
      },
    }
  );
}

  const commit: Commit<M> = (commitOptions = {}) => {
    if (pending) return;

    const input = {
      ...state,
      ...commitOptions.merge,
    };
    if (commitOptions.merge != null) setState(input);

    // Find, set, and forus the first error only.
    // Sure we can set all errors at once, but I prefer less noisy UI.
    // The order is defined by object property order which is reliable:
    // https://stackoverflow.com/a/23202095/233902
    // Why not an array? Object is more handy for GraphQL.
    // Check api/schema.graphql SignInErrors type.
    const handleErrors = (errors: Errors<M>): { hasError: boolean } => {
      const error = Object.entries(errors).find(([, value]) => value != null);
      if (error != null && error[1] != null) {
        // @ts-ignore PR anyone?
        setErrors({ [error[0]]: error[1] });
        const field = focusablesRef.current[error[0]];
        if (field) field.focus();
      } else {
        setErrors({});
      }
      return { hasError: error != null };
    };

    if (useMutationOptions.validator) {
      const errors = useMutationOptions.validator(input);
      if (handleErrors(errors).hasError) return;
    }

    setPending(true);

    if (disposableRef.current) disposableRef.current.dispose();

    disposableRef.current = commitMutation<M>(relayEnvironment, {
      mutation,
      variables: { input },
      onCompleted(response, payloadErrors) {
        setPending(false);
        if (payloadErrors) {
          handleApiGraphQLError(payloadErrors, {
            401() {
              appHref.replace({
                pathname: '/signin',
                query: { redirectUrl: Router.asPath || '' },
              });
            },
            403() {
              // eslint-disable-next-line no-alert
              alert(intl.formatMessage(messages.forbidden));
            },
            404() {
              // This should not happen with mutation.
              // eslint-disable-next-line no-alert
              alert(intl.formatMessage(messages.notFound));
            },
            unknown() {
              // eslint-disable-next-line no-alert
              alert(payloadErrors);
            },
          });
          return;
        }
        const firstResponse = response[Object.keys(response)[0]] as Response<M>;
        const errors = ((firstResponse && firstResponse.errors) ||
          {}) as Errors<M>;
        if (handleErrors(errors).hasError) return;
        if (commitOptions.onSuccess) {
          commitOptions.onSuccess(firstResponse);
        }
      },
      onError(error) {
        setPending(false);
        if (error == null) return;
        const isNetworkError = error.message === 'Failed to fetch';
        const message = isNetworkError
          ? intl.formatMessage(messages.noInternetAccess)
          : error.message;
        // eslint-disable-next-line no-alert
        alert(message);
      },
    });
  };

export function sendConversationMessage(
  environment: Environment,
  conversation: Conversation,
  text: string,
  onCompleted: MutationConfig<any>["onCompleted"],
  onError: MutationConfig<any>["onError"]
) {
  const storeUpdater = (store: RecordSourceSelectorProxy) => {
    const mutationPayload = store.getRootField("sendConversationMessage")
    const newMessageEdge = mutationPayload.getLinkedRecord("messageEdge")
    const conversationStore = store.get(conversation.__id)
    const connection = ConnectionHandler.getConnection(conversationStore, "Messages_messages")
    ConnectionHandler.insertEdgeBefore(connection, newMessageEdge)
  }
  return commitMutation<SendConversationMessageMutation>(environment, {
    onCompleted,
    onError,
    optimisticUpdater: storeUpdater,
    updater: storeUpdater,

    // TODO: See if we can extract the field selections into a fragment and share it with the normal pagination fragment.
    //      Also looks like we can get rid of the `body` selection.
    mutation: graphql`
      mutation SendConversationMessageMutation($input: SendConversationMessageMutationInput!) {
        sendConversationMessage(input: $input) {
          messageEdge {
            node {
              impulse_id
              is_from_user
              body
              __id
              ...Message_message
            }
          }
        }
      }
    `,

    variables: {
      input: {
        id: conversation.id,
        from: conversation.from.email,
        body_text: text,
        // Reply to the last message
        reply_to_message_id: conversation.last_message_id,
      },
    },

    // TODO: Figure out which of these keys is *actually* required for Relay Modern and update the typings to reflect that.
    //      And if it’s really true that this config isn’t enough to update the connection and we really need the updater
    //      functions.
    configs: [
      {
        type: "RANGE_ADD",
        parentName: "conversation",
        parentID: "__id",
        connectionName: "messages",
        edgeName: "messageEdge",
        rangeBehaviors: {
          "": "APPEND",
        },
        connectionInfo: [
          {
            key: "Messages_messages",
            rangeBehavior: "append",
          },
        ],
      },
    ],

    optimisticResponse: {
      sendConversationMessage: {
        messageEdge: {
          node: {
            body: text,
            from: {
              email: conversation.from.email,
              name: null,
            },
            is_from_user: true,
            created_at: null, // Intentionally left blank so Message can recognize this as an optimistic response.
            attachments: [],
          } as any,
        },
      },
    },
  })
}