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

REACT_APP_QUILTT_DEPLOYMENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

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
ReactDOM.render(
<React.StrictMode>
{/* Replace "apollo" with "urql" to use urql for queries instead */}
<QuilttProvider deploymentId={deploymentId} 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 Deployment ID and choice of client to handle GraphQL queries (apollo|urql).

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

AnchoruseQuilttContext

const {
deploymentId, // 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'
},
});