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:

Using npm:

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

Or 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 App ID to your .env file

REACT_APP_QUILTT_APP_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Lastly, import QuilttProvider from @quiltt/client and connect it to our 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 appId = process.env.REACT_APP_QUILTT_APP_ID
ReactDOM.render(
<React.StrictMode>
{/* Replace "apollo" with "urql" to use urql for queries instead */}
<QuilttProvider appId={appId} client="apollo">
<App />
</QuilttProvider>
</React.StrictMode>,
document.getElementById('root')
)

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


AnchorAPI

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

AnchorQuilttProvider

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

<QuilttProvider appId={appId} client={client}>
{children}
</QuilttProvider>
appIdrequired string
client enum
options: "apollo", "urql"
default value: apollo

AnchoruseQuilttContext

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

AnchoruseQuilttAuth

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.

AnchoruseProfileQuery

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

AnchoruseAccountsQuery

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

AnchoruseProfileUpdateMutation

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

AnchorusePlaidLinkTokenCreateMutation

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

AnchorusePlaidItemCreateMutation

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

AnchorusePlaidItemUnlinkMutation

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