unable to access types that implement a interface while parsing data from GraphQL query

Question

I have a methodsfragment.ts file that is autogenerated for a graphql fragment query. I used the command npm run generate --graphql.

In the query we have a interface formElement which can be a input, select, radio etc based on the data. The data looks something like this:

    inputs[{
     formElements:{
        identifier: "first_name_input",
        label: "First name",
         placeholder: "" 
}
},{
formElement:{
  identifier: "select_year",
  label: "year",
  options:["1999","2000", "2001"]
}}]

in my methodsFragments.ts I have the definition of formElements something like:

export type inputRows_formElements = inputRows_formElements_firstNameInputField | inputRows_formElements_yearDropdown;

type  firstNameInputField {
 identifier: string!;
 label: string!;
 placeholder: string!;
}

type yearDropdown {
   identifier: string!;
   label: string!;
   options: string[];

}

when I am trying to access data, I do something like:

methods.map(formEle) =>{
  switch(formEle.identifier):
    case "select_year" :
      console.log("options length" + formEle.options); // at this line i get the error 
}

The error message is: "Property options does not exist on type inputRows_formElements".I am not sure how to resolve this error.

Love Bisaria · Accepted Answer · 2020-04-27 17:06:38Z

0

To resolve this error you use the as keyword provided in trypescript. So when you access the data for options you do something like:

methods.map(formEle) => {
  switch(formEle.identifier):
    case "select_year" :
      let curElement = formEle as inputRows_formElements_yearDropdown
      console.log("options length" + formEle.options); 
}

This should resolve this issue.

answered Apr 27, 2020 at 17:06

Love Bisaria

1671 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

unable to access types that implement a interface while parsing data from GraphQL query

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related