# Subscribe to real-time events using Subscriptions
URL: https://www.quiltt.dev/api/graphql/subscriptions
Description: Learn how to subscribe to real-time Profile events in GraphQL.
Navigation: api → graphql → subscriptions
Tags: API, GraphQL

Quiltt provides full support for GraphQL's powerful [subscriptions capabilities](https://graphql.org/blog/subscriptions-in-graphql-and-relay/).

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.

## 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.
- `connectionSynced`: Fires whenever a Connection finishes syncing.

You can see the full list of available Subscriptions Operations in the [GraphQL API Reference](/api-reference/graphql#group-Operations-Subscriptions).

## 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](https://www.apollographql.com/docs/react/data/subscriptions/) 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](https://github.com/quiltt/quiltt-sdks/tree/main/packages/react#quilttprovider) for more information.

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

```jsx

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 

      Account Verified?: [account.verified]

}

```

### `connectionCreated` Subscription

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

```jsx

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

      [connection.institution.name]

      [connection.institution.name: connection.institution.logo.url]
    </>
  )
}

```

### `connectionSynced` Subscription

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

```jsx

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]
    </>
  )
}

```