Blog
Custom schema specific Supabase Client Component clients in Grida Form workspace

Custom schema specific Supabase Client Component clients in Grida Form workspace

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), 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 ramu.narasinga@gmail.com

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