Subscribe to real-time events using Subscriptions
Loading...
Loading...
Loading...
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.
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.connectionSynced: Fires whenever a Connection finishes syncing.You can see the full list of available Subscriptions Operations in the GraphQL API Reference.
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.
accountVerified SubscriptionHere'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 to fire for all accounts
})
const account = !loading && data?.accountVerified?.account
return <h4>Account Verified?: {account.verified}</h4>
}
export default AccountVerifiedStatus
connectionCreated SubscriptionHere'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
connectionSynced SubscriptionHere's an example of how to create a real-time Connection sync status component. The component will re-render whenever the Connection has finished syncing.
import { gql, useSubscription } from '@quiltt/react'
const CONNECTION_SYNCED_SUBSCRIPTION = gql`
subscription ConnectionSyncedSubscription {
connectionSynced {
connection {
id
status
}
}
}
`
const ConnectionSyncStatus = () => {
const { loading, data } = useSubscription(CONNECTION_SYNCED_SUBSCRIPTION, {
variables: { connectionId: 'conn_1234' }, // can be omitted to fire for all connections
})
const connection = data?.connectionSynced?.connection
if (loading) return 'Loading...'
return (
<>
Status: {connection.status}
</>
)
}
export default ConnectionSyncStatus