The variable <variable> is not meeting the 'never' constraint. Error code: ts(2344)

Currently, I am attempting to utilize Supabase alongside TypeScript. However, I encounter an error when trying to use functions like insert(), update(), upsert(), etc. Specifically, the issue arises when declaring the object I want to declare: "Type <Restaurant> does not satisfy the constraint 'never'. ts(2344)"

Here is my code snippet:

type Restaurant = {
    id: string;
    name: string;
    categories: string[];
    open: boolean;
    description: string;
  }


const addRestaurant = async () => {
    if (!user.value) return 
    
    const { data, error } = await supabaseClient
      .from('restaurants')
      .upsert<Restaurant>({
        id: user.value.id,
        name: name.value,
        categories: arr,
        open: status.value,
        description: description.value
      })
      .select()
      console.log(data, error);

  }

The error pertains to <Restaurant>, and when I don't specify the type, a similar error occurs stating:

Argument of type '{ id: string; name: string; categories: string; open: boolean; description: string; }' is not assignable to parameter of type 'never[]'. Object literal may only specify known properties, and 'id' does not exist in type 'never[]'.ts(2345)

When hovering over the "upsert()" function, it seems like this is happening in the background:

PostgrestQueryBuilder<never, never>

Any suggestions on how to resolve this?

  • I attempted specifying the Type of the object but realized that the functions [insert, update, upsert] require something else.
  • I found out that adding a second parameter with an empty string temporarily resolves the error. However, modifying anything within it triggers the error again (which shouldn't be the ideal solution).
  • The code functions with or without the second parameter, but the error persists during development - I prefer not to disable Typescript as I want to catch errors early.

Answer №1

In order to resolve the issue, I simply had to generate the types from Supabase. This was achieved by utilizing the Supabase CLI and executing the following command in the terminal:

supabase gen types typescript --project-id

Subsequently, I needed to incorporate the generated types into my Supabase client code like so:

import { createClient } from '@supabase/supabase-js'
import { Database } from 'lib/database.types'

const supabase = createClient<Database>(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_ANON_KEY
)

Answer №2

When using supabase-js, handling types is different than what you might expect. It's important to familiarize yourself with the TypeScript support section in the documentation for a better understanding. If you don't explicitly define a type, errors will only occur if you're passing in values of type never[]. In your code snippet, the absence of a guard clause when accessing user.value.id can cause legitimate errors as it's not always guaranteed to have a value.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor can only bind to Iterables like Arrays

I have successfully pulled data from the jsonplaceholder fake API and now I am attempting to bind it using Angular 2 {{}} syntax. However, I encountered an error that states: "Error: Cannot find a differ supporting object '[object Object]' of typ ...

Converting python sqlalchemy queries to SQL syntax

Currently, I'm involved in an assignment that requires the management of a collection of PostgreSQL databases related to a school district. One of my tasks is to update the new field student_gpas, which is an array designed to store unique student GPA ...

Mapping a response object to a Type interface with multiple Type Interfaces in Angular 7: A step-by-step guide

Here is the interface structure I am working with: export interface ObjLookup { owner?: IObjOwner; contacts?: IOwnerContacts[]; location?: IOwnerLocation; } This includes the following interfaces as well: export interface IObjOwner { las ...

The Vue3 module does not have any exported members available

I am seeking assistance with a Vue component. I have encountered an error message that states: Failed to compile. src/components/Btn/Btn.vue:11:14 TS2305: Module '"../../typings/button-type"' has no exported member 'ButtonType&apo ...

Is it better to keep a lengthy array in the back-end or front-end storage?

I'm facing a dilemma in my angular application. I have a lengthy array that I need to access easily from the front-end without causing any slowdowns. There are various options available, but I'm unsure which one would be the most efficient. Shoul ...

Managing HTTP requests with errors within a forEach loop in Angular 9

I am currently coding a script that iterates through an array to make HTTP requests. Most of these requests are directed towards non-existent resources, but I do not have information on which ones specifically. Here is the code snippet I am using: ...

In Typescript, is it possible to utilize the value from a particular key in a type declaration as the type for another key within the same declaration?

Consider a scenario where I am designing a Variable type that includes a key named type with a value of type string. Is there a method to extract the value from the type key and utilize it as the type for another key within the declaration, without resorti ...

Dealing with the 503 Error in the Express framework of Node.js, especially when caught within a Try

I have encountered a unique scenario in which I am trying to troubleshoot the potential causes of a 503 Error. Below is a snippet of code where a catch statement is triggered if no results are found: app.post('/api/fetch/user', function(req, res ...

"Navigate with ease using Material-UI's BottomNavigationItem and link

What is the best way to implement UI navigation using a React component? I am currently working with a <BottomNavigationItem /> component that renders as a <button>. How can I modify it to navigate to a specific URL? class FooterNavigation e ...

Experiencing unfamiliar typescript glitches while attempting to compile a turborepo initiative

I have been utilizing the turborepo-template for my project. Initially, everything was running smoothly until TypeScript suddenly started displaying peculiar errors. ../../packages/fork-me/src/client/star-me/star-me.tsx:19:4 nextjs-example:build: Type erro ...

Empty initial value for first item in array using React hooks

My goal is to store an array that I retrieve from an API in a useState hook, but the first entry in my array always ends up empty. The initial array looks like this: (3) ["", "5ea5d29230778c1cd47e02dd", "5ea5d2f430778c1cd47e02de"] The actual data I recei ...

What is the correct way to define types for higher-order class components in TypeScript?

I have developed a utility function that currently has an unused options parameter, and it returns a higher-order component wrapping function. How can I effectively define types on the component so that users of the wrapped component can visualize the typ ...

data not corresponding to interface

I am encountering an issue that says Type '({ name: string; href: string; icon: IconDefinition; } | { name: string; href: string; icon: IconDefinition; childs: { name: string; href: string; icon: IconDefinition; }[]; })[]' is missing the followin ...

What is the significance of default parameters in a JavaScript IIFE within a TypeScript module?

If I were to create a basic TypeScript module called test, it would appear as follows: module test { export class MyTest { name = "hello"; } } The resulting JavaScript generates an IIFE structured like this: var test; (function (test) { ...

Having trouble debugging the current TypeScript file in VS Code because the corresponding JavaScript file is missing

In my current project using Visual Studio Code version 1.17, I am focusing on debugging the current typescript file. As part of my setup, I have a build task in place which generates a corresponding javascript file structure like so: src/folder1/folder2/m ...

Ways to verify the input label in Angular version 4 and above?

I'm working on an Angular component that includes a form structured like this: <form> <label for="Name">Click me</label> <input type="text" id="Name" name="Name" /> <label for="Name2">Click me 2</label> &l ...

I am looking to integrate my information into the user interface using Angular

import { Component, ViewEncapsulation } from '@angular/core'; import { Router } from '@angular/router'; import { Batch } from '../../../config/batchnew/batch.model'; import { BatchService } from '../../../config/batchnew ...

SvelteKit is having trouble with identifying Typescript syntax

I was working on a SvelteKit project with TypeScript (set up with Vite) and everything was running smoothly with "npm run dev". However, when I attempted to publish the app on Github Pages, an error popped up (on localhost) as I hovered over the only link ...

Ways to imitate an export default function

//CustomConfigurator.ts export default function customizeConfig(name: string): string { // add some custom logic here return output; } //CustomUtility.ts import customizeConfig from './CustomConfigurator'; export default class CustomUtility ...

Angular8: Adjusting Activity Status After Leaving Page

When performing activities like upload, download, delete, and edit, I display statuses such as 'upload started' or 'upload completed'. This works perfectly when staying on the same page. However, there are instances where a user may nav ...