How to Implement MX Connect with the Quiltt API

Once you have your App setup to run queries and mutations, you can use the Quiltt API to implement MX Connect. This guide will give you a quick and easy way to integrate MX Connect with the Quiltt API.

If you're following the previous guide, we'll be continuing where we left off with our project.

Next, we can create a new MX folder in the src directory.

We'll create a ConnectWidget.tsx file within that new folder. Then we can start with importing the required modules for this component and build out its structure.

We'll guide you through creating this component step-by-step so you can see how modular we can make this component.

At the end of this guide, we'll be able to use this component as a base for every possible MX configuration.

Skip to the end to see the finished component

Link to this section#Building the Connect Component

Link to this section#Step 1: Import required packages

Add imports from @apollo/client right after react and return an HTML button component.

Link to this section#Step 2: Destructure our props and assign them to the button

Besides className and children, the list of destructured props is the same as the list of inputs that the connectorMxInitialize mutation expects.

Link to this section#Step 3: Add custom logic for the component

In this step, we will be adding the required states, callback functions, and mutations to our component.

Add these parts at the beginning of your component before the return statement.

First, start with initializing the state for widgetURL, connectorToken, and widgetIsOpen. We will be using these to track our tokens for MX Connect and the Quiltt connector, and the open state of the widget.

Next, we'll add the connectorMxInitialize and connectorMxClose mutations for the connections. See our docs for more information on these mutations.

Then, set our event handlers for the mutations and for interacting with the widget.

Now, we can set up the handlers and event listeners for the widget itself. Instead of callbacks MX uses Post Message Events to communicate with the widget. Check out MX's Docs for a list of all available events.

Finally, we can set up the widget component itself to pass that along with the button text as a child component for the button. The widget can be styled however you want, but for demo purposes, we will just be using inline styles.

And our button should now look like this

Link to this section#Final Product

Link to this section#Usage

Here's an example of how to use the MX Connect component.