Missing 'id' property in object {`id`} when utilizing GraphQL with Typescript

As a newcomer to coding and Typescript, I apologize for my limited knowledge. I am currently facing an issue where my application is unable to communicate with my API due to an error caused by the primary id key having a "?" symbol, like so:

export interface PartMaster {
    id?: number;
 }

Removing the "?" symbol leads to one error, while keeping it also results in a different error. Could this be related to something missing in GraphQL? Although I primarily work on the front end, I need to resolve this independently today, as my colleague who handles GraphQL is unavailable. Any guidance would be greatly appreciated.

Below is the code triggering the issue when the "?" symbol is present in the id:

computed: {
    part(): PartMaster {
      return {
        partNumber: this.partNumber,
        
      }
    }
  },

The error message states "property 'id' missing in type partNumber"

When the "?" symbol is included, the error message occurs at the following lines:

editRow(partMaster.id)
editRow(part.id)

Both partmaster.id and part.id are highlighted with the error message:

Argument of type 'number | undefined' is not assignable to parameter of type 'number'. Type 'undefined' is not assignable to type 'number'.

Answer №1

It would be beneficial to provide more details, specifically regarding the editRow function's definition and where the GraphQL query is executed, as well as the specific error message received when id is not marked as optional. Unfortunately, I am unable to comment due to my current reputation level, so I will address these points within this answer instead.

Based on the information available, here are my assumptions:

  • The error messages you mentioned (
    Argument of type 'number | undefined' is not assignable to parameter of type 'number'. Type 'undefined' is not assignable to type 'number'.
    ) are likely arising because the editRow function expects an argument of type number. By making id optional, it implies that it could potentially be undefined at times. To resolve this, you can either remove the optional marker or modify editRow to accept number | undefined and handle the undefined scenario in the code.
  • If you encounter issues after removing the "?" from id, I recommend verifying that your GraphQL query explicitly requests the id field. In GraphQL, it is essential to only request the necessary data, so it is possible that the id field is missing from the query. If this does not resolve the issue, additional information as mentioned earlier would be required for further assistance.

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

Incorporating XMLHttpRequest in my React Typescript App to trigger a Mailchimp API call, allowing users to easily sign up for the newsletter

My website needs to integrate Mailchimp's API in order for users to subscribe to a newsletter by entering their email into a field. I am looking to implement this without relying on any external libraries. To test out the functionality, I have set up ...

To utilize this.<module> within a Nuxt plugin, simply access it

How can I access a JS API exposed by a Nuxt module from a client-side plugin? Situation: I am utilizing Buefy/Bulma, which is implemented in nuxt.config.js like this: modules: [ ['nuxt-buefy', {css: false}], ], Buefy provides this.$buefy.&l ...

Building applications with Vue.js and Framework7 while incorporating the powerful Axios library

I am inexperienced with framework7 and vuejs. Can someone confirm if I am importing it correctly? Additionally, how can I make axios accessible from other pages? Here is my main.js file. I’m uncertain if the import process is accurate or if any steps ar ...

What is the best way to implement a generic parameter with constraints in an abstract method?

Take a look at this scenario: interface BaseArgs { service: string } abstract class BaseClass { constructor(name: string, args: BaseArgs) { this.setFields(args) } abstract setFields<T extends BaseArgs>(args: T): void } interface ChildA ...

Using AngularFire2 to manage your data services?

After diving into the resources provided by Angular.io and the Git Docs for AngularFire2, I decided to experiment with a more efficient approach. It seems that creating a service is recommended when working with the same data across different components in ...

vue.js: Modifying information through watcher function

Here is the code I am currently using: export default { name: '...', props: ['user'], data() { return { userName: this.user.name } }, watch: { user: (_user) => { th ...

Error in Typescript: The property 'a' is not defined in the type 'A'

Here is an example of the different types I am working with: type Place = { address: string } type Location = { latLng: string } type User = { name: string } & (Place | Location) When attempting to parse the data using this structure, I enco ...

Dealing with numerous validations upon submission in Vue.js

Greetings! I have a requirement to check and validate multiple inputs before allowing the user to submit: <button type="submit" v-on:click="validateErrors()" @click.prevent="submit">Finalize</button> I have crea ...

Navigating to a specific div within a component in Vuejs 2: Steps for routing

These are the routes I've set up for my application: const router = new VueRouter({ mode:'history', routes:[ { path:'/home', name:'home', component: Home }, { path: '/serv ...

Switching between links while using Vue Router may cause jQuery to become disabled

I am currently utilizing vue router to facilitate navigation on my website. Within this setup, I have various pages such as a home page and an about us page. The issue I am facing pertains to some jQuery functionality that is implemented in a separate JS f ...

The function res.status is not defined

Currently, I am in the process of integrating my upcoming app with Google Sheets. I have relocated the function that manages the post request to "app/api/sheets" as per the recommended documentation. import type { NextApiRequest, NextApiResponse } from &ap ...

Encountering an issue with TypeScript and Jest when trying to import a file leads to an

Having trouble with using Jest in a TypeScript environment. //myprovider.tsx class MyProvider{ constructor(){} giveMeFive(): int{ return 5; } } export { MyProvider } // myprovider.test.js import { MyProvider } from './myprovider'; ...

The module 'webpack/lib/web/FetchCompileWasmTemplatePlugin' could not be located

I encountered an issue with my Vue application that is currently running live on Node version 8. Upon cloning the application, I deleted the `package.lock` file and `node_module` folder. Following this, I ran `npm i` but faced a problem as I have node vers ...

Make sure to always keep all stars contained within a div element

How can I keep five stars inside a div even when the screen size is small? I have created a div with an image and I want to place five stars within that div. However, as I reduce the size of the screen, the stars come out of the box. Is there a way to en ...

Setting up Vite dev server to run through a port proxy path: A step-by-step guide

Exploring the use of Vite dev server in a cloud-based development setup where it's possible to serve on and connect to ports, but access must be through a proxy path. Instead of typing http://localhost:3000/index.html, the goal is to reach https://my ...

TypeScript implementation of internationalization message extraction in Create React App

I am facing challenges in getting i18n messages extracted, as defined by react-intl's defineMessages, to function correctly in a TypeScript-based CRA. Here are the methods I've attempted: Initial Approach I tried following this guide to make i ...

Tips for utilizing the latest hook feature in Typegoose

After adding a pre hook on updateOne events, I noticed it functions differently compared to save events... I believe this discrepancy is due to the fact that the update command typically includes a matcher as its first argument. I attempted to capture the ...

Extract a string value from a TypeScript enum

Here is a basic enum definition: export enum Type { TEST_ONE = "testing.one", TEST_TWO = "testing.two", BETA = "beta.one" } I am looking to run a function for each string value in the enum. For example: executeType(type: string) { console.lo ...

Attempting to automatically invoke the API every minute, rather than relying on the user to reload the page

I currently have fetchCoins() in my mounted() function, which calls the API whenever a user refreshes. My goal is to call the API once, store the data in local storage, and then retrieve the data every minute. methods: { async fetchCoins() { con ...

Vue's bidirectional data binding presents a challenge when attempting to update the parent component from a child component

I have the following components: Parent Component: <template> <v-container> <v-row class="text-center"> <v-col cols="12" class="parent"> <p>I am the Parent component</p> ...