How to Reconnect Broken MX Connections with the Quiltt API

Due to changes in auth credentials, or changes from the provider, some connections will be left in a broken state where the user has to repair the connection. This guide aims to provide you with a way to allow your users to repair these connections.

This guide assumes that you followed along our previous guide, How to Implement MX Connect to build the MxConnectWidget component.

Since we’ve built the MxConnectWidget to be very modular, this reconnect button will be much simpler.

The most important part of this component is to pass the connectionId as a prop. Check out the MX Docs for requesting a Connect widget URL to see other props that can be passed for different configuration scenarios. However, the connectionId is the only prop that is required to open Connect in update mode.

If successful, the record.url returned by the mutation will be used to open the widget in update mode to update a member’s credentials.

AnchorThe Component

Copy to clipboard
import * as React from 'react'

import MxConnectWidget from './MxConnectWidget'

const MxReconnectButton = ({ connectionId, features = undefined, ...buttonProps }) => {
  const mxOptions = {
    connectionId,
    features,
  }

  const handleEvent = (event) => {
    // Do something here. Typically, you would want to refetch the data after a successful reconnection.
  }

  const handleSuccess = (metadata) => {
    // Do something with the onSuccess metadata.
  }

  return (
    <MxConnectWidget
      onEvent={handleEvent}
      onSuccess={handleSuccess}
      {...buttonProps}
      {...mxOptions}
    >
      Reconnect
    </MxConnectWidget>
  )
}

export default MxReconnectButton