How to Set Up Your Client-Side App with React

Link to this section#Quick 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.

Then, install the other dependencies:

@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.

Link to this section#Environment

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

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:

Link to this section#Quiltt 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.

Link to this section#Props

<QuilttProvider />

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.

Link to this section#Query 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.

For further reading, see the Apollo Docs