DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on

1

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.

Image description

Client Component

createClientFormsClient

You will find the below code at line 4

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

createClientCommerceClient

You will find the below code at line 13

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

createClientWorkspaceClient

You will find the below code at line 23.

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

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

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
Enter fullscreen mode Exit fullscreen mode

@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 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

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay