Quiltt Logo

Subscribe to real-time events using Subscriptions

Quiltt provides full support for GraphQL's powerful subscriptions capabilities.

GraphQL Subscriptions allow you to receive real-time updates whenever a specific event occurs on a Profile. This can power live status indicators, onboarding flows, trigger re-fetching of data and more.

Link to this section#Available Subscriptions

Currently the following Subscriptions are available via GraphQL:

  • accountVerified: Fires whenever an Account's verification status changes.
  • connectionCreated: Fires whenever a new Connection is created.
  • connectionUpdated: Fires whenever an existing Connection's status or features change.

Link to this section#Using Subscriptions in React

The Quiltt React SDK ships with a useSubscription hook built on top of Apollo Client. You can refer to the official docs for customization options.

The examples below assume you have implemented the QuilttProvider component, which will handle authentication and configure the API client. See the SDK docs for more information.

Link to this section#accountVerified Subscription

Here's an example of a real-time Account verification status component. This component will re-render whenever the Account's verification status changes.

import { gql, useSubscription } from '@quiltt/react'

const ACCOUNT_VERIFIED_SUBSCRIPTION = gql`
  subscription AccountVerifiedSubscription {
    accountVerified {
      account {
        id
        name
        verified
      }
    }
  }
`

const AccountVerifiedStatus = () => {
  const { loading, data } = useSubscription(ACCOUNT_VERIFIED_SUBSCRIPTION, {
    variables: { accountId: 'acct_1234' }, // can be omitted for all accounts
  })
  const account = !loading && data?.accountVerified?.account

  return <h4>Account Verified?: {account.verified}</h4>
}

export default AccountVerifiedStatus

Link to this section#connectionCreated Subscription

Here's an example of how to render a new Connection in real-time as soon as it's created.

import { gql, useSubscription } from '@quiltt/react'

const CONNECTION_CREATED_SUBSCRIPTION = gql`
  subscription ConnectionCreatedSubscription {
    connectionCreated {
      connection {
        id
        institution {
          id
          name
          logo {
            url
          }
        }
      }
    }
  }
`

const ConnectionCard = () => {
  const { data, loading } = useSubscription(CONNECTION_CREATED_SUBSCRIPTION)
  const connection = !loading && data?.connectionCreated?.connection

  if (!connection) return 'Waiting for new Connection to be created...'

  return (
    <>
      <h4>{connection.institution.name}</h4>
      <img src={connection.institution.logo.url} />
    </>
  )
}

export default ConnectionCard

Link to this section#connectionUpdated Subscription

Here's an example of how to create a real-time Connection status component. The component will re-render whenever the Connection's status or features change.

import { gql, useSubscription } from '@quiltt/react'

const CONNECTION_UPDATED_SUBSCRIPTION = gql`
  subscription ConnectionUpdatedSubscription {
    connectionUpdated {
      connection {
        id
        status
      }
    }
  }
`

const ConnectionStatus = () => {
  const { loading, data } = useSubscription(CONNECTION_UPDATED_SUBSCRIPTION, {
    variables: { connectionId: 'conn_1234' },
  })

  const connection = data?.connectionUpdated?.connection

  if (loading) return 'Loading...'

  return (
    <>
      {connection.id} - {connection.status}
    </>
  )
}

export default ConnectionStatus
Pagination →