Error encountered while processing Graphql response: The string is unable to accurately represent the value of

Question

Error encountered while processing Graphql response: The string is unable to accurately represent the value of

I'm encountering an issue with GraphQL while attempting to retrieve the name of an airport from JSON data. Instead of receiving a single item containing just the airport name, I'm getting an array with additional details like city, country, geolocation, and more. Below is the code I am using...

const getNameOfAirport = (name:any)=>{
    return AIRPORTS.filter((i)=>{
        if(i.iata_code === name){
            return i.name.length;
        }
    })
}

When running console.log(getNameOfAirport("BLR")), the output includes:

[
  {
    name: 'Bangalore',
    city: 'Bangalore',
    country: 'India',
    iata_code: 'BLR',
    _geoloc: { lat: 12.949986, lng: 77.668206 },
    links_count: 195,
    objectID: '3131'
  }
]

My desired response is simply "Bangalore". Any assistance on this matter would be greatly appreciated. Please advise me on where I may have made an error.

Additional Note: I am utilizing TypeScript. It functions correctly with JSX as anticipated, but seems to be behaving incorrectly with TS.

typescript graphql express-graphql

Answer 1

Answer №1

There are a few mistakes that need to be addressed:

While you are using Typescript, it seems unnecessary to use any as your type. This defeats the purpose of using Typescript in the first place.

const getNameOfAirport = (name:any)=>{
    return AIRPORTS.filter((i)=>{
        if(i.iata_code === name){
            return i.name.length;
        }
    })
}

The function references the array AIRPORTS but does not receive it as an argument. It's best practice to avoid side effects by passing all necessary data into the function.

You should consider using .find() instead of Array.filter() for this use case.

It's recommended to create an interface like this:

const getNameOfAirport = (
  airports: Airport[],
  name: string
): string | undefined => {
  return airports.find((airport) => airport.iata_code === name)?.name;
};

interface Airport {
  name: string;
  city: string;
  country: string;
  iata_code: string;
  _geoloc: {
    lat: number;
    lng: number;
  };
  links_count: number;
  objectID: string;
}

To call the function, use:

getNameOfAirport(AIRPORTS, "BLR")

As a suggestion, consider renaming getNameOfAirport to something more descriptive like getAirportNameByIataCode.

Answer 2

There are a few mistakes that need to be addressed:

While you are using Typescript, it seems unnecessary to use any as your type. This defeats the purpose of using Typescript in the first place.

const getNameOfAirport = (name:any)=>{
    return AIRPORTS.filter((i)=>{
        if(i.iata_code === name){
            return i.name.length;
        }
    })
}

The function references the array AIRPORTS but does not receive it as an argument. It's best practice to avoid side effects by passing all necessary data into the function.

You should consider using .find() instead of Array.filter() for this use case.

It's recommended to create an interface like this:

const getNameOfAirport = (
  airports: Airport[],
  name: string
): string | undefined => {
  return airports.find((airport) => airport.iata_code === name)?.name;
};

interface Airport {
  name: string;
  city: string;
  country: string;
  iata_code: string;
  _geoloc: {
    lat: number;
    lng: number;
  };
  links_count: number;
  objectID: string;
}

To call the function, use:

getNameOfAirport(AIRPORTS, "BLR")

As a suggestion, consider renaming getNameOfAirport to something more descriptive like getAirportNameByIataCode.

Error encountered while processing Graphql response: The string is unable to accurately represent the value of

Answer №1

Similar questions

Using ExpressJS with TypeScript: Understanding Request Context

Trouble encountered with uploading files using Multer

Which TypeScript type must be used to define a class as a prop in the script setup of Vue 3?

The intricate field name of a TypeScript class

Scope Error in VueJS Project with TypeScript

Angular chat integration

Fetching data in VueJs before redirecting to a new page

How to retrieve a value only if it is truthy in JavaScript or TypeScript - Understanding the operator

Describing data types in TypeScript, when an <Array> contains various structures

Troubleshooting Angular 14 Custom Form Control Display Issue

Calendar Component in Angular 2 Written in Typescript and Javascript

A guide on setting up Webpack to directly load a module from its source folder rather than the distribution folder

What is the best practice for making a gRPC call within a Typescript Vue.Js component?

Switch statement with reduced scope for factory

A function in Typescript that dynamically determines its return type based on a specified generic parameter

When working with Typescript, utilizing `null as string | null` can result in a parsing error that says, "Unexpected token, expected ``,`."

When attempting to upload a file in Vue Apollo, a Node crash occurs with the error message "Maximum call stack size

"Concealing a column in a PrimeNG data table with dynamic columns: A step-by-step

Tips on sorting a nested array in a React TypeScript project

"Exploring the advancements in inner calls and the deprecation of forkJoin