This project showcases how to use Prisma ORM with Prisma Accelerate in a Remix application. It demonstrates every available caching strategy in Accelerate.
To successfully run the project, you will need the following:
- The connection string of a publicly accessible database.
- Your Accelerate connection string (containing your Accelerate API key) which you can get by enabling Accelerate in a project in your Prisma Data Platform account (learn more in the docs).
Clone the repository, navigate into it and install dependencies:
git clone [email protected]:prisma/prisma-examples.git --depth=1
cd prisma-examples/accelerate/remix-starter
npm install
Copy the .env.example env file in the root of the project directory:
cp .env.example .envNow, open the .env file and set the DIRECT_DATABASE_URL and DATABASE_URL environment variables with the values of your connection string and your Accelerate connection string respectively:
# .env
# Accelerate connection string (used for queries by Prisma Client)
DATABASE_URL="__YOUR_ACCELERATE_CONNECTION_STRING__"
# Database connection string (used for migrations by Prisma Migrate)
DIRECT_DATABASE_URL="__YOUR_DATABASE_CONNECTION_STRING__"
Note that __YOUR_DATABASE_CONNECTION_STRING__ and __YOUR_ACCELERATE_CONNECTION_STRING__ are placeholder values that you need to replace with the values of your database and Accelerate connection strings. Notice that the Accelerate connection string has the following structure: prisma://accelerate.prisma-data.net/?api_key=__YOUR_ACCELERATE_API_KEY__.
The Prisma schema file contains a single Quotes model. You can map this model to the database and create the corresponding Quotes table using the following command:
npx prisma migrate dev --name init
You now have an empty Quotes table in your database. Next, run the seed script to create some sample records in the table:
npx prisma db seed
When using Accelerate, Prisma Client doesn't need a query engine. That's why you should generate it as follows:
npx prisma generate --no-engine
You can run the app with the following command:
npm run dev
The application will start on PORT 5173 and you should be able to see the performance and other stats (e.g. cache/hit) for the different Accelerate cache strategies at the bottom of the UI:
This application queries the most recent Quote with all the different cache strategies available in Accelerate.
Optionally, to add your own quote and see the caching strategies in action, you can add a new quote through Prisma Studio by running the following command:
npx prisma studio
Once the Prisma Studio is running, you can add a new quote by clicking on the Quotes table and then the Add Record button as shown in the screenshot below.
After adding a new record, you can refresh the Remix application to see the new quote and the caching strategies in action.