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
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.
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
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
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
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.