In this article, we will review the Supabase Client Component clients in Grida Form workspace. In case you are wondering what a Supabase Client Component client is, Read the Supabase docs.

Client Component client — To access Supabase from Client Components, which run in the browser.

In the lib/supabase/client.ts, you have multiple clients defined depending on the schema.

Client Component

createClientFormsClient

You will find the below code at line 4

export const createClientFormsClient = () =>
  createClientComponentClient<Database, "grida_forms">({
    options: {
      db: {
        schema: "grida_forms",
      },
    },
  });

createClientCommerceClient

You will find the below code at line 13

export const createClientCommerceClient = () =>
  createClientComponentClient<Database, "grida_commerce">({
    options: {
      db: {
        schema: "grida_commerce",
      },
    },
    isSingleton: false,
  });

createClientWorkspaceClient

You will find the below code at line 23.

export const createClientWorkspaceClient = () =>
  createClientComponentClient<Database, "public">({
    options: {
      db: {
        schema: "public",
      },
    },
    isSingleton: false,
  });

createClientComponentClient is imported from as shown below @supabase/auth-helpers-nextjs:

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";

@supabase/auth-helpers-nextjs

You will find this package on npm registry — https://www.npmjs.com/package/@supabase/auth-helpers-nextjs

This below note is from npm registry:

This package is now deprecated — please use the @supabase/ssr *package instead.

There is also [legacy documentation]([*https://supabase.com/docs/guides/auth/auth-helpers/nextjs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)*), showing

a usage example.*

API changes over time, You have to accommodate these changes by bumping the dependency package and updating the relevant API. In this case, I would make a major release in my project that involves migration to @supabase/ssr instead of @supabase/auth-helpers-nextjs as this is deprecated, but I wouldn’t rush though unless it is breaking production, otherwise I would rather have some more updates along with

this version bump.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at [email protected]

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References

1. https://supabase.com/docs/guides/api/using-custom-schemas

2. https://github.com/orgs/supabase/discussions/21511

3. https://supabase.com/docs/guides/auth/auth-helpers/nextjs

4. https://www.npmjs.com/package/@supabase/auth-helpers-nextjs

5. https://github.com/gridaco/grida/blob/main/apps/forms/lib/supabase/client.ts

6. https://supabase.com/docs/guides/auth/server-side/nextjs?queryGroups=router&router=app