Skip to main content

React Client

The Quiltt React Client is a state management library for JavaScript that enables you to communicate with the Quiltt API, and manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data in Quiltt.

Quiltt React Client helps you structure code in a predictable and declarative way that’s consistent with modern web development practices. Currently, the core @quiltt/client library provides built-in integration with React and @apollo/client.

AnchorGetting Started

This brief tutorial will get you up and running with the Quiltt React Client.

Anchor1. Installation

To get started, we recommend that you scaffold a new React project locally with Create React App

Next, install the required dependencies:

AnchorUsing npm:

# using apollo client
$ npm install @quiltt/client@next @apollo/client
# using urql client
$ npm install @quiltt/client@next urql

AnchorOr Yarn:

# using apollo client
$ yarn add @quiltt/client@next @apollo/client
# using urql client
$ yarn add @quiltt/client@next urql
  • @quiltt/client contains all the required logic, built-in queries, and storage of data on the Quiltt API.
  • @apollo/client includes the in-memory cache, local state management, error handling, and a React-based view layer.

Anchor2. Connect the Quiltt Provider to React

Add your Quiltt Deployment ID to your .env file


Lastly, import QuilttProvider from @quiltt/client and connect it to the React app in index.js:

// index.js
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { QuilttProvider } from '@quiltt/client'
import App from './App'
const deploymentId = process.env.REACT_APP_QUILTT_DEPLOYMENT_ID
{/* Replace "apollo" with "urql" to use urql for queries instead */}
<QuilttProvider deploymentId={deploymentId} client="apollo">
<App />

🎉 You are now ready to talk to the Quiltt API!


Here are some available functions and hooks for getting passwordless authentication and GraphQL queries working with the Quiltt React Client.


The QuilttProvider is a wrapper component that takes your Quiltt Deployment ID and choice of client to handle GraphQL queries (apollo|urql).

<QuilttProvider deploymentId={deploymentId} client={client}>
deploymentIdrequired string
authBase string
apiBase string
apiVersion string
authorizationToken string


const {
deploymentId, // string
authorizationToken, // string | null
setAuthorizationToken, // (token: string | null) => void
} = useQuilttContext()


const {
ping, // (token: string) => Promise<AxiosResponse<any>>
identify, // (user: UsernamePayload) => Promise<AxiosResponse<any>>
authenticate, // (authenticationVariables: PasscodePayload) => Promise<AxiosResponse<any>>
revoke, // (token: string) => Promise<AxiosResponse<any>>
} = useQuilttAuth

AnchorQuery Hooks

Here are some built-in queries you can use to speed up your development.

To run a query within a React component, call [queryName] and pass it any options that fit your needs. When your component renders, [queryName] returns an object from Apollo Client that contains loading, error, and data properties you can use to render your UI.


const { data, loading, error } = useProfileQuery({
variables: {
// ProfileQuery variables


const { data, loading, error } = useAccountsQuery({
variables: {
// AccountsQuery variables

AnchorMutation Hooks

Here are some built-in mutations you can use to speed up your development.

To run a mutation, you first call [mutationName] within a React component and pass it any options that fit your needs. When your component renders, [mutationName] returns a tuple that includes:

  • A mutate function that you can call at any time to execute the mutation
  • An object with fields that represent the current status of the mutation’s execution


const [profileUpdateMutation, { data, loading, error }] = useProfileUpdateMutation({
variables: {
input: // value for 'input'


const [plaidLinkTokenCreateMutation, { data, loading, error }] = usePlaidLinkTokenCreateMutation({
variables: {
input: // value for 'input'


const [plaidItemCreateMutation, { data, loading, error }] = usePlaidItemCreateMutation({
variables: {
input: // value for 'input'


const [plaidItemUnlinkMutation, { data, loading, error }] = usePlaidItemUnlinkMutation({
variables: {
id: // value for 'id'