🔧 Direct Supabase Client Integration: Redefining Data Access Without Prisma

[junkisai]

Issue

• resolve:

Why is this change needed?

To eventually remove Prisma, we set up our system to perform database operations using the Supabase client.

I manage the type definition files generated by Supabase in git because generating these types requires launching a Docker-based Supabase, and Vercel Deployment does not support Docker.

In addition to git management, I created a GitHub Action to ensure that the type definition files are always up-to-date. (35d3c10 )
ref. https://supabase.com/docs/guides/deployment/ci/generating-types#verify-types

What would you like reviewers to focus on?

Testing Verification

What was done

🤖 Generated by PR Agent at 41bcf63

• Replaced Prisma with Supabase for project data handling.
• Added Supabase TypeScript types generation script.
• Updated permissions for the Project table in Supabase.
• Adjusted UI handling for empty project states and date formatting.

Detailed Changes

	Relevant files
Enhancement	index.ts Integrate Supabase client in database module                          frontend/packages/db/src/index.ts Imported Supabase client creation functions. Updated exports to use Supabase client with type safety. +7/-1      ProjectsPage.tsx Refactor ProjectsPage to use Supabase client                          frontend/apps/app/features/projects/pages/ProjectsPage/ProjectsPage.tsx Replaced Prisma with Supabase for project data retrieval. Updated handling of empty project states. Adjusted date formatting for project creation dates. +9/-15    20250319115250_remote_schema.sql Add Supabase permissions migration for Project table          frontend/packages/db/supabase/migrations/20250319115250_remote_schema.sql Added SQL migration to set permissions for the Project table. Defined permissions for anon, authenticated, and service_role roles. +43/-0
Configuration changes	package.json Add Supabase types generation script                                          frontend/packages/db/package.json Added a script to generate Supabase TypeScript types. +1/-0

Additional Notes

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 93f9b19

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
liam-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 25, 2025 4:39am
liam-erd-sample	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 25, 2025 4:39am

4 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
liam-docs	⬜️ Ignored (Inspect)	Visit Preview		Mar 25, 2025 4:39am
test-liam-app	⬜️ Ignored (Inspect)			Mar 25, 2025 4:39am
test-liam-docs	⬜️ Ignored (Inspect)			Mar 25, 2025 4:39am
test-liam-erd-sample	⬜️ Ignored (Inspect)			Mar 25, 2025 4:39am

[qodo-merge-pro-for-open-source]

PR Reviewer Guide 🔍

(Review updated until commit 93f9b19)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Date Formatting The date formatting has been changed from using toLocaleDateString to directly displaying the raw date string from Supabase, which may result in an unformatted ISO timestamp being shown to users. <p className={styles.createdAt}>Created: {project.createdAt}</p> Null Check The null check for projects (projects === null) may be unnecessary since Supabase query returns an empty array rather than null when no records are found. {projects === null || projects.length === 0 ? ( Prisma Dependency The PR aims to replace Prisma with Supabase, but the Prisma client is still being imported and exported, which could lead to confusion and unnecessary dependencies. import { PrismaClient } from '@prisma/client' import { createBrowserClient as _createBrowserClient, createServerClient as _createServerClient, } from '@supabase/ssr' import type { Database } from '../supabase/database.types' export const prisma = new PrismaClient()

[supabase]

Updates to Preview Branch (feat/directly-use-supabase-client) ↗︎

Deployments	Status	Updated
Database	✅	Tue, 25 Mar 2025 04:36:40 UTC
Services	✅	Tue, 25 Mar 2025 04:36:40 UTC
APIs	✅	Tue, 25 Mar 2025 04:36:40 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks	Status	Updated
Configurations	✅	Tue, 25 Mar 2025 04:36:41 UTC
Migrations	✅	Tue, 25 Mar 2025 04:36:42 UTC
Seeding	✅	Tue, 25 Mar 2025 04:36:42 UTC
Edge Functions	✅	Tue, 25 Mar 2025 04:36:42 UTC

---

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

[liam-migration-preview]

The schema changes provided indicate a significant transition from using Prisma as the primary database client to adopting Supabase for data management within the project. Below is a detailed review of the changes:

1. Client Transition:

   • The change in the import statement from prisma to createClient indicates a migration from using Prisma ORM to Supabase’s client libraries. This shift may suggest a strategic decision to leverage Supabase's real-time capabilities and built-in authentication features. This transition can enhance the application’s responsiveness and scalability, but it is crucial to ensure that the data model and relationships defined in the Prisma schema are accurately represented in Supabase.

2. Data Retrieval Logic:

   • The getProjects function has been modified to use Supabase for fetching project data. The new query structure adheres to Supabase's API design, which is a positive step if it aligns with the application's requirements. The changes from prisma.project.findMany() to supabase.from('Project').select(...) reflect a necessary adaptation to the new client’s syntax. However, it is essential to confirm that the underlying database schema in Supabase has not altered, and all necessary fields (id, name, createdAt) are still appropriately indexed for performance.

3. Error Handling:

   • The conditional check for projects has been enhanced from checking just the length to also considering if projects is null. This improves the robustness of the application by preventing potential runtime errors if the query returns null. It is advisable to implement additional error handling to manage the scenarios where the query might fail, such as network issues or database errors.

4. Date Formatting:

   • The date formatting change from project.createdAt.toLocaleDateString('en-US') to simply project.createdAt may lead to inconsistencies in how dates are displayed to users. If createdAt is stored as a string or a timestamp without formatting, it could be displayed in an unformatted way, leading to a poor user experience. It would be prudent to ensure that dates are formatted appropriately before rendering.

5. Database Permissions:

   • The addition of a new SQL migration script that grants various permissions to different roles (anon, authenticated, service_role) for the Project table indicates a thoughtful approach to security. This granular permission control allows for better security practices by ensuring that only authorized users can perform specific actions on the Project table. However, it is vital to review these permissions in the context of the application's overall security model to avoid potential vulnerabilities, especially with the anon role having extensive permissions.

6. TypeScript Integration:

   • The addition of TypeScript types for the Supabase database (export const createServerClient = _createServerClient<Database>) is a beneficial change that enhances type safety within the application. Ensuring that the data types used throughout the application align with the database schema is crucial for preventing runtime errors and improving developer experience.

7. Package Management:

   • The update to the package.json to include a command for generating TypeScript types from Supabase is a positive addition, streamlining the development process and ensuring that types are always up-to-date with the database schema. This encourages best practices in maintaining type integrity across the application.

Overall, the changes present a strategic shift towards utilizing Supabase, which can offer benefits like real-time capabilities and simplified database management. However, it is imperative to conduct thorough testing to ensure that the migration does not introduce new issues, particularly regarding data integrity, user experience, and security. Additionally, documentation should be updated to reflect these changes for future developers working on the project.

Migration URL: https://liam-app-git-staging-route-06-core.vercel.app/app/projects/4/migrations/5

[qodo-merge-pro-for-open-source]

PR Code Suggestions ✨

Latest suggestions up to 93f9b19
Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Handle undefined data properly Add a check for undefined projects since the Supabase query could return undefined data. The current check only handles null and empty arrays. frontend/apps/app/features/projects/pages/ProjectsPage/ProjectsPage.tsx [28] -{projects === null || projects.length === 0 ? ( +{!projects || projects.length === 0 ? ( Apply this suggestion Suggestion importance[1-10]: 8 __ Why: This suggestion addresses a potential runtime error by checking for undefined data from the Supabase query. Since the PR changes the data source from Prisma to Supabase, this is an important defensive check that prevents the application from crashing if the query fails.	Medium
General	Format date for display Format the date string properly. The direct use of project.createdAt might display raw ISO format. Consider parsing and formatting the date for better readability. frontend/apps/app/features/projects/pages/ProjectsPage/ProjectsPage.tsx [42] -<p className={styles.createdAt}>Created: {project.createdAt}</p> +<p className={styles.createdAt}>Created: {new Date(project.createdAt).toLocaleDateString('en-US')}</p> Apply this suggestion Suggestion importance[1-10]: 7 __ Why: The suggestion improves user experience by properly formatting the date. The PR removed date formatting that existed in the previous version, and raw ISO date strings are not user-friendly. This restores the intended functionality with the new data source.	Medium
More

---

Previous suggestions

Suggestions up to commit 41bcf63

Category	Suggestion	Impact
Security	Restrict anonymous user permissions Granting full table permissions (including delete, truncate, and update) to the "anon" role is a significant security risk. The "anon" role is for unauthenticated users, and they should have minimal or no access to your project data. Consider restricting permissions for the "anon" role. frontend/packages/db/supabase/migrations/20250319115250_remote_schema.sql [1-13] -grant delete on table "public"."Project" to "anon"; - -grant insert on table "public"."Project" to "anon"; - -grant references on table "public"."Project" to "anon"; - +-- Remove or restrict permissions for anon role grant select on table "public"."Project" to "anon"; -grant trigger on table "public"."Project" to "anon"; +-- Keep full permissions for authenticated users +grant delete on table "public"."Project" to "authenticated"; -grant truncate on table "public"."Project" to "anon"; +grant insert on table "public"."Project" to "authenticated"; -grant update on table "public"."Project" to "anon"; +grant references on table "public"."Project" to "authenticated"; +grant select on table "public"."Project" to "authenticated"; + +grant trigger on table "public"."Project" to "authenticated"; + +grant truncate on table "public"."Project" to "authenticated"; + +grant update on table "public"."Project" to "authenticated"; + Suggestion importance[1-10]: 10 __ Why: This suggestion addresses a critical security vulnerability by pointing out that granting full table permissions to unauthenticated users ("anon" role) is dangerous. This could lead to unauthorized data access, modification, or deletion.	High
General	Format date string properly The createdAt field is being displayed directly without formatting. Since you've switched from Prisma (which returns Date objects) to Supabase (which returns ISO strings), you should parse and format the date string to maintain the same user experience as before. frontend/apps/app/features/projects/pages/ProjectsPage/ProjectsPage.tsx [42] -<p className={styles.createdAt}>Created: {project.createdAt}</p> +<p className={styles.createdAt}>Created: {new Date(project.createdAt).toLocaleDateString('en-US')}</p> Suggestion importance[1-10]: 9 __ Why: This suggestion is highly relevant as it fixes a regression introduced in the PR. The original code formatted dates with toLocaleDateString(), but this was removed when switching to Supabase, which returns ISO strings instead of Date objects.	High
Possible issue	Improve null check handling The current null check is insufficient. When using Supabase, the data property might be null, but when it's not null, it's an array that could potentially be undefined. You should add a check for undefined as well to prevent potential runtime errors. frontend/apps/app/features/projects/pages/ProjectsPage/ProjectsPage.tsx [28-32] -{projects === null || projects.length === 0 ? ( +{!projects || projects.length === 0 ? ( <div className={styles.emptyState}> <p>No projects found.</p> <p>Create a new project to get started.</p> </div> Suggestion importance[1-10]: 8 __ Why: This suggestion correctly addresses a potential runtime error by improving the null check. The PR switched from Prisma to Supabase, and Supabase's data property could be null or undefined, making this check important for preventing crashes.	Medium

[junkisai]

When attempting to retrieve records using the Supabase client, an error occurred due to insufficient privileges, so I added the necessary permissions.

[MH4GF]

This is a bit of a hassle... 😓 Thanks!!

[MH4GF]

LGTM 👍🏻 Thanks!!

[MH4GF]

This is a bit of a hassle... 😓 Thanks!!

[MH4GF]

Looks great 🚀

[MH4GF]

💭 If we can make this into a script of package.json, it may be easier to develop.
But you don't have to do it now.