How to Implement Plaid Link with the Quiltt API
Once you have your App setup to run queries and mutations, you can use the Quiltt API to implement Plaid Link. This guide will give you a quick and easy way to integrate Plaid Link with the Quiltt API.
If you're following the previous guide, we'll be continuing where we left off with our project. Let's start with installing the required dependencies for this step.
Next, we can create a new
Plaid folder in the
We'll create a
LinkWidget.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.
There's slightly more boilerplate than if you followed Plaid's Guide, but at the end of this guide, we'll be able to use this one component as a base for every possible Plaid integration.
Link to this section#Building the Link 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
connectorPlaidInitialize 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
connectorToken. We will be using these to track our tokens for Plaid Link and the Quiltt connector.
Next, we'll add the
connectorPlaidClose mutations for the connections. See our docs for more information on these mutations.
Then, set an
onCompleted callback for the
connectorPlaidInitialize mutation. And initialize both mutations.
Finally, we can set up the Plaid Link config and add the click handler for our button.
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 Plaid Link component.