Skip to main content

How to Set Up Your Client-Side App with React


AnchorQuick Start

Start by scaffolding a new React app with Create React App. For this tutorial, we’ll use the yarn. However, it should work the same for npm.

yarn create react-app my-app --template typescript
cd my-app

Then, install the other dependencies:

yarn add @quiltt/client @apollo/client

@quiltt/client is the client-side library for Quiltt. It provides a set of hooks and a wrapper for your Quiltt Settings and the Apollo Client for your GraphQL queries. These tools can help you speed up the development process of building your client-side app.


AnchorEnvironment

Now you want to setup your environment variables. Create a new .env file in your project root. Then add the following lines:

REACT_APP_QUILTT_DEPLOYMENT_ID=<your-deployment-id>

Note: You can find your deployment ID in the Quiltt Dashboard.

If everything is set up correctly, you should be able to run your dev server and see changes as you edit your code. To start the dev server, run:

yarn start

AnchorQuiltt Provider

Now that your environment variables are set up, you can start using the Quiltt Provider. Let’s start importing QuilttProvider in your index.tsx file in the src directory. Then, pass your deployment ID from your environment variables to the QuilttProvider component.

import React from 'react'
import { QuilttProvider } from '@quiltt/client'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
const deploymentId = process.env.REACT_APP_QUILTT_DEPLOYMENT_ID
root.render(
<React.StrictMode>
<QuilttProvider deploymentId={deploymentId}>
<App />
</QuilttProvider>
</React.StrictMode>
)

AnchorProps

deploymentIdrequired string
UUID
authBase string
URL
apiBase string
URL
apiVersion string
authorizationToken string

QuilttProvider accepts a number of props. However, the most important is deploymentId. In most cases, none of the other props are necessary. QuilttProvider also provides a useQuilttAuth hook for you to use in your passwordless client-side auth.

You can follow our guides on How to Implement Passwordless Auth if you would like to manually implement passwordless auth and pass the authorizationToken to the QuilttProvider.


AnchorQuery Client

QuilttProvider also provides a wrapper around @apollo/client with the client and query cache set up for you to use in your GraphQL queries and mutations. Simply import the hooks needed for your operation.

import * as React from 'react'
import { gql, useQuery, useMutation } from '@quiltt/client'
const GET_CONNECTIONS = gql`
query GetConnections {
connections {
id
institution {
name
}
}
}
`
const Component = () => {
const { data, loading, error } = useQuery(GET_CONNECTIONS)
if (loading) return <p>Loading...</p>
if (error) return <p>Error</p>
return (
<ul>
{data.connections.map(map => (
<li key={connection.id}>{connection.institution.name}</li>
))}
</ul>
)
}

For further reading, see the Apollo Docs