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