Utilizing TypeScript Types for Supabase Integration

Question

Utilizing TypeScript Types for Supabase Integration

I am attempting to incorporate Supabase typescript types into my Next.js project, however, I encounter the error

Expected 0 type arguments, but received 1.

I'm following the instructions outlined in this documentation. Although I've successfully generated the types, I'm unable to implement them in my application.

Whenever I try to utilize the following code:

import { createClient } from "@/utils/supabase/server";
import { Database } from "@/types/supabase";

export async function myFunction() {
  const supabase = createClient<Database>();
}

The <Database> component triggers this error message:

Expected 0 type arguments, but received 1.

. If I remove <Database>, the error disappears, but I lose the benefits of type safety.

typescript next.js supabase

Answer 1

Answer №1

Give this a try:

import { Database } from '@/types/supabase'
import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'

export const initializeClient = () => {
  const cookieStore = cookies()
  return createServerClient<Database>(
    process.env.SUPABASE_URL!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options })
          } catch (error) {
            // The `set` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: '', ...options })
          } catch (error) {
            // The `delete` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    }
  )
}

Answer 2

Give this a try:

import { Database } from '@/types/supabase'
import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'

export const initializeClient = () => {
  const cookieStore = cookies()
  return createServerClient<Database>(
    process.env.SUPABASE_URL!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options })
          } catch (error) {
            // The `set` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: '', ...options })
          } catch (error) {
            // The `delete` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    }
  )
}

Utilizing TypeScript Types for Supabase Integration

Answer №1

Similar questions

Utilizing Angular 4 with Ahead-Of-Time compilation in combination with Electron, as well as

What is the method to acquire the firestore reference type in TypeScript?

Encountered an error saying 'TextEncoder is not defined' when running Jest in Next.js version 14

Is there a way to renew a token when utilizing msal-node for Microsoft Integration?

Employee plus Concave Authentication

Error message: "Unidentified variable in the code snippet from MUIv5 sample."

In the case of explicit object keys and string types, TypeScript does not narrow types

The function Router.push("/") is not functioning as expected when called within the pages/index.js file

Creating two number-like types in TypeScript that are incompatible with each other can be achieved by defining two

The issue of Next.js 13 failing to render on the browser has left users

A guide on creating tagged strings by parsing JSON data

Invoke a function within an Angular component that is passed in as a parameter

Exploring through objects extensively and expanding all their values within Angular

Use a loop to assign numbers to elements in an array based on a specific condition using JavaScript

What is the process for incorporating a new page from a NextJS application into an AWS Amplify project?

Querying data conditionally with Angular rxjs

Creating an endless scrolling feature with Ionic 3

Leverage the JSON Web Token module within a Chrome extension

What is the best approach to limit the return type of a function in JSX?

Discover the art of customizing child elements using vanilla extract!