Quiltt

https://www.quiltt.dev/
Admin
Quiltt is a hybrid API platform that uses GraphQL and REST endpoints to securely manage and interact...
Tokens:376,095
Snippets:2,814
Trust Score:5.5
Update:5 days ago
Show doc for...
Tokens:
Raw
### Install @quiltt/vue with npm

Source: https://www.quiltt.dev/connector/sdk/vue

Install the Quiltt Vue SDK and Vue using npm.

```sh
npm install @quiltt/vue vue
```

--------------------------------

### Install @quiltt/vue with yarn

Source: https://www.quiltt.dev/connector/sdk/vue

Install the Quiltt Vue SDK and Vue using yarn.

```sh
yarn add @quiltt/vue vue
```

--------------------------------

### Install @quiltt/react with npm

Source: https://www.quiltt.dev/connector/sdk/react

Install the Quiltt React SDK package using npm.

```sh
npm install @quiltt/react
```

--------------------------------

### Install @quiltt/react with yarn

Source: https://www.quiltt.dev/connector/sdk/react

Install the Quiltt React SDK package using yarn.

```sh
yarn add @quiltt/react
```

--------------------------------

### Install React dependencies

Source: https://www.quiltt.dev/connector/sdk/capacitor

Install the Quiltt Capacitor and React packages and sync the native project.

```sh
npm install @quiltt/capacitor @quiltt/react react react-dom
npx cap sync
```

--------------------------------

### Install @quiltt/vue with pnpm

Source: https://www.quiltt.dev/connector/sdk/vue

Install the Quiltt Vue SDK and Vue using pnpm.

```sh
pnpm add @quiltt/vue vue
```

--------------------------------

### Install @quiltt/react with pnpm

Source: https://www.quiltt.dev/connector/sdk/react

Install the Quiltt React SDK package using pnpm.

```sh
pnpm add @quiltt/react
```

--------------------------------

### TransactionFilter full example

Source: https://www.quiltt.dev/api-reference/graphql

A comprehensive example showing all available fields in the TransactionFilter object.

```json
{
  "accountIds": ["acct_12Hz9Dz7vEAuljYvhmPcvM9"],
  "amount": 987.65,
  "amount_abs": 123.45,
  "amount_abs_gt": 123.45,
  "amount_abs_gte": 123.45,
  "amount_abs_lt": 123.45,
  "amount_abs_lte": 987.65,
  "amount_gt": 123.45,
  "amount_gte": 123.45,
  "amount_lt": 987.65,
  "amount_lte": 987.65,
  "date": "2007-12-03",
  "date_gt": "2007-12-03",
  "date_gte": "2007-12-03",
  "date_lt": "2007-12-03",
  "date_lte": "2007-12-03",
  "entryType": "CREDIT",
  "kind": ["DEPOSITORY"],
  "kind_not": ["DEPOSITORY"],
  "metadata": {},
  "status": ["PENDING"]
}
```

--------------------------------

### Install Vue dependencies

Source: https://www.quiltt.dev/connector/sdk/capacitor

Install the Quiltt Capacitor and Vue packages and sync the native project.

```sh
npm install @quiltt/capacitor @quiltt/vue vue
npx cap sync
```

--------------------------------

### Install React Navigation dependencies

Source: https://www.quiltt.dev/connector/sdk/react-native

Commands to install the necessary React Navigation packages using npm, pnpm, or yarn.

```sh
npm install @react-navigation/native @react-navigation/native-stack
```

```sh
pnpm add @react-navigation/native @react-navigation/native-stack
```

```sh
yarn add @react-navigation/native @react-navigation/native-stack
```

--------------------------------

### Install dependencies with npm

Source: https://www.quiltt.dev/connector/sdk/react-native

Install the required peer dependencies and the Quiltt React Native SDK using npm.

```sh
npm install base-64 react-native-webview react-native-url-polyfill react-native-safe-area-context
npm install @quiltt/react-native
```

--------------------------------

### Install GraphQL Code Generator dependencies

Source: https://www.quiltt.dev/get-started/tutorials/graphql-tooling

Install the necessary CLI and plugin packages along with the Quiltt React library.

```bash
pnpm add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations
pnpm add graphql @quiltt/react
```

--------------------------------

### Start Development Server

Source: https://www.quiltt.dev/get-started/tutorials/authentication

Run the development server to begin building the application.

```bash
pnpm dev
```

--------------------------------

### GraphQL: Query remoteData for a Connection

Source: https://www.quiltt.dev/api/remote-data

Example GraphQL query to retrieve MX remote data for a connection, including the member's GUID, name, OAuth status, and user GUID.

```APIDOC
## GraphQL Query: remoteData on Connection

### Description
Fetches Remote Data from the Profile GraphQL API for a Connection, specifically the MX provider's member data.

### Method
GraphQL Query

### Endpoint
Profile GraphQL API (not specified)

### Query
```graphql
{
  connections {
    id
    provider
    remoteData {
      mx {
        connection {
          id
          timestamp
          response [guid
            name
            isOauth
            userGuid]
        }
      }
    }
  }
}
```

### Response
Returns the connection ID, provider, and remote data containing MX connection details including id, timestamp, and response fields (guid, name, isOauth, userGuid).
```

--------------------------------

### Quickstart Connector Script and Button

Source: https://www.quiltt.dev/connector/sdk/html

Load the Connector script and add a button to launch the modal.

```html
Head:
<!-- Load the Connector Script -->
  <script src="https://cdn.quiltt.io/v1/connector.js"></script>

Body:
<!-- Launch the Connector with a button -->
  <button quiltt-button="<CONNECTOR_ID>">Click Here!</button>
```

--------------------------------

### Get Account Verification Status GraphQL Response

Source: https://www.quiltt.dev/api/numbers

Example response for the account verification status query.

```json
{
  "data": {
    "account": ["id": "acct_16FvuCM1Pg8NzjwuN9qndzm",
      "name": "Checking Account",
      "verified": true]
  }
}
```

--------------------------------

### Start server and expose with ngrok

Source: https://www.quiltt.dev/guides/account-verification

Run these commands to start your server and expose it with a tunnel for testing the verification flow. The ngrok URL will be used as the subscription's target URL.

```bash
node server.js
ngrok http 3000
```

--------------------------------

### TransactionFilter status example

Source: https://www.quiltt.dev/api-reference/graphql

Examples of filtering transactions by their status.

```graphql
{ status: POSTED }
```

```graphql
{ status: PENDING }
```

--------------------------------

### TransactionFilter kind_not example

Source: https://www.quiltt.dev/api-reference/graphql

Examples of excluding transactions by account classification.

```graphql
{ kind_not: DEPOSITORY }
```

```graphql
{ kind_not: [LOAN, CREDIT] }
```

--------------------------------

### Initialize Next.js Project and Install Dependencies

Source: https://www.quiltt.dev/get-started/tutorials/authentication

Create a new Next.js project with TypeScript and Tailwind CSS, then install the @quiltt/react package.

```bash
pnpm create next-app quiltt-auth-tutorial --typescript --tailwind --app
cd quiltt-auth-tutorial
pnpm add @quiltt/react
```

--------------------------------

### TransactionFilter kind example

Source: https://www.quiltt.dev/api-reference/graphql

Examples of filtering transactions by account classification.

```graphql
{ kind: DEPOSITORY }
```

```graphql
{ kind: [LOAN, CREDIT] }
```

--------------------------------

### Basic ConnectorView and WebView Implementation

Source: https://www.quiltt.dev/connector/sdk/ios

This example demonstrates how to define a SwiftUI view that initializes the QuilttConnector, authenticates with a session token, and handles connection events.

```swift

struct ConnectorView: View {
    @Binding var showHomeView: Bool
    @Binding var connectionId: String
    var body: some View [WebView(showHomeView: $showHomeView, connectionId: $connectionId)]
}

struct WebView: UIViewRepresentable {
    @Binding var showHomeView: Bool
    @Binding var connectionId: String
    @State var config = QuilttConnectorConnectConfiguration(
        connectorId: "<CONNECTOR_ID>",
        appLauncherUrl: "<YOUR_HTTPS_UNIVERSAL_LINK>",
        institution: "<OPTIONAL_INSTITUTION_SEARCH_TERM_TO_PREFILL_INSTITUTION>",
        themeMode: "auto"
    )

    func makeUIView(context: Context) -> WKWebView {
        // Initialize QuilttConnector
        let quilttConnector = QuilttConnector.init()

        // Authenticate the Connector
        // See https://www.quiltt.dev/authentication/issuing-session-tokens
        quilttConnector.authenticate(token: "<SESSION_TOKEN_FROM_SERVER>")

        // Launch the Connector
        let webview = quilttConnector.connect(config: config,
                                              onEvent: [eventType, metadata in
                                                print("onEvent \(eventType), \(metadata)")],
                                              onExitSuccess: { metadata in
                                                print("onExitSuccess \(metadata)")
                                                if let newConnectionId = metadata.connectionId [connectionId = newConnectionId]
                                                showHomeView = true
                                              },
                                              onExitAbort: [metadata in
                                                print("onExitAbort \(metadata)")
                                                showHomeView = true],
                                              onExitError: [metadata in
                                                print("onExitError \(metadata)")
                                                showHomeView = true])
        return webview
    }

    func updateUIView(_ uiView: WKWebView, context: Context) [// Use this method to update the WKWebView with new configuration settings.]
}

#Preview [ConnectorView(showHomeView: .constant(false), connectionId: .constant("connectionId"))]
```

--------------------------------

### TransactionFilter metadata example

Source: https://www.quiltt.dev/api-reference/graphql

Examples of filtering transactions based on metadata contents.

```graphql
{ metadata: { hidden: true } }
```

```graphql
{ metadata: { my_category: "Tasty Treats" } }
```

```graphql
{ metadata: null }
```
Tokens:
Raw