Encountering an error while trying to update an Angular application to version 10

I am currently running a demo app and I am new to Angular. Below is my category list component.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { AngularGridInstance, Column, GridOption, GraphqlService, GraphqlResult, Filters, Formatters, OnEventArgs, FieldType } from 'angular-slickgrid';

import { CategoryDataService } from 'src/app/core/services/category-data.service';
import { PageService } from 'src/app/core/services/page.service';


const GRAPHQL_QUERY_DATASET_NAME = 'categories';


@Component({
  templateUrl: './category-list.component.html',
  styleUrls: ['./category-list.component.css']
})
export class CategoryListComponent implements OnInit {
  angularGrid: AngularGridInstance;
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset = [];

  constructor(private dataService: CategoryDataService, private router: Router, private pageService: PageService) {
  }

  ngOnInit(): void {
    this.columnDefinitions = [
        ...removed
    ];

    this.gridOptions = {
      backendServiceApi: {
        service: new GraphqlService(),
        options: {
          columnDefinitions: this.columnDefinitions,
          datasetName: GRAPHQL_QUERY_DATASET_NAME
        },
        process: (query) => this.getCategories(),
      }
    };;
  }

 
  getCategories(): Observable<GraphqlResult> {
    var args = this.pageService.getPageArgs(this.angularGrid);

    return this.dataService.searchCategories(args)
      .pipe(map(
        page => {
          var result: GraphqlResult = {
            data: {
              [GRAPHQL_QUERY_DATASET_NAME]: {
                nodes: page.items,  ---here i am getting error
                pageInfo: {
                  hasNextPage: page.hasNextPage
                },
                totalCount: page.totalCount
              }
            }
          };

          return result;
        }));
  }
}

The demo project was functioning properly before. However, after updating to the latest version of Slick Grid, I encountered the following error. It displays 'not type any' error. Could someone please guide me on how to convert a generic class to any type? Thank you.

https://i.sstatic.net/gCeDL.png

Here is the interface for Pagination.

export interface IPagedList<T> {
     pageIndex: number;
     .... removed
    
    items: T[];
}

Error: Type of computed property's value is '{ nodes: IProduct[]; pageInfo: { hasNextPage: boolean; }; totalCount: number; }', which is not assignable to type 'any[]'. Object literal may only specify known properties, and 'nodes' does not exist in type 'any[]'.

Answer №1

A recent update in version 2.15.x of Angular-Slickgrid introduced a minor change. A new Type GraphqlPaginatedResult was added for use with Pagination, while GraphqlResult is now used without Pagination. To accommodate this change, simply switch your Type to GraphqlPaginatedResult. Instead of creating a breaking version (3.x) for this small change, a find+replace from GraphqlResult to GraphqlPaginatedResult is all that is needed.

getCategories(): Observable<GraphqlPaginatedResult> {

Further details can be found in the Release changelog.

Along with this change, a new Example 27 - Graphql without Pagination was introduced, utilizing GraphqlResult, while the existing Example 6 - Graphql now uses the new GraphqlPaginatedResult Type.

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

Is there a way to merge my local store with Firestore using ngrx entity?

Currently, I'm facing a challenge while using NgRx and Firestore as I attempt to keep the local store in sync with a firestore collection. I have set up an observable that triggers when the firestore collection is updated. However, in my reducer, I am ...

Encounter a Typescript error when dealing with "app.ws" while using express-ws

I have a small project in mind where I want to create a BabyCam that can be accessed from any web browser using a Raspberry Pi Zero. My plan is to set up a web socket using express-is to stream video to multiple clients. I'm utilizing the raspivid-str ...

The selected image should change its border color, while clicking on another image within the same div should deselect the previous image

https://i.sstatic.net/jp2VF.png I could really use some assistance! I've been working on Angular8 and I came across an image that shows how all the div elements are being selected when clicking on an image. Instead of just removing the border effect f ...

A guide to iterating over an array and displaying individual elements in Vue

In my application, there is a small form where users can add a date with multiple start and end times which are then stored in an array. This process can be repeated as many times as needed. Here is how the array structure looks: datesFinal: {meetingName: ...

Angular sets the required property only when the button is clicked

Is there a way to make a field required in Angular only when a button is clicked? Currently, the error message appears even before the user interacts with the field. I would like the error message "folder name is required" to only appear when the user cli ...

Ways to emit a value from an observable once it is defined?

Is it feasible to create an observable that can wrap around the sessionStorage.getItem('currentuser')? This way, calling code can subscribe and retrieve the value only after it has been set in the sessionStorage. Do you think this is achievable? ...

react-router: The 'history' type is not found in the current context

Here is some code snippet from App.tsx: interface AppProps{ history: any } export default class App extends React.Component<AppProps,...> { public state = { target: this.props.history.push('/') }; private route() { if (! ...

Problem with Typescript: The type '{ x;y }' is required to have a '[Symbol.iterator]()' method

Just starting out with Typescript and tackling the task of converting a React project from JavaScript to TypeScript. I've been diving into various posts for guidance, but I feel like I'm going in circles. Any assistance would be greatly appreci ...

Create a definition file containing a class that can be easily extended

I am attempting to define an interface in a declaration file: declare namespace Foo{ export interface Bar{ new(attrs, options) } } Then I want to inherit from this interface in my code: class Chunk extends Foo.Bar {} However, I encounte ...

Using ngModel to Enhance Ionic Forms

I've encountered an issue with mapping a form to a model object. Once I include [[ngModel]] in the ion-input, the page fails to load without any errors. html <ion-input type="text" [(ngModel)]="personModel.username" formControlName="username" id= ...

Encountered an error while trying to generate the Component class for the ColorlibStepIcon from Material UI in TypeScript

I am trying to convert the ColorlibStepIcon functional component into a class component for my Stepper. Unfortunately, I have not been successful and keep encountering errors. I have attempted some changes but it is still not working as expected. You can ...

Guide on accessing and manipulating local files using an Angular application

For my Angular 7 web app project, I'm looking to allow users to complete surveys and submit their responses. Since I don't have a database set up yet, I thought of storing the results in a local json file for now. Unfortunately, I'm facing d ...

Vue3 and Ionic combined to create a Component that became a reactive object in Vue

Vue is issuing a warning about receiving a Component as a reactive object, which can cause unnecessary performance overhead. The warning suggests using markRaw or shallowRef instead of ref to avoid this issue. However, in my code, I am not explicitly using ...

Odd behavior of escape characters in Typescript

Looking for help with a query similar to the one referenced here. I am new to TypeScript and front end development. Currently using an Angular form to collect user input, which may contain regex. For example: The input from the form, stored in this.expr ...

Is there a way to append a unique property with varying values to an array of objects in TypeScript?

For instance: items: object[] = [ {name: 'Backpack', weight: 2.5}, {name: 'Flashlight', weight: 0.8}, {name: 'Map', weight: 0.3} ]; I prefer the items to have an 'age' property as well: it ...

I'm receiving an error message stating that 'This command is not available when running the Angular CLI outside a workspace,' even though I am in the correct folder

Upon starting my Angular project, which I cloned from GitHub and initiated using the command line "ng serve" or "ng serve -o", I encountered the following error: "Error: This command is not available when running the Angular CLI outside a workspace." My pr ...

Error message: The provider is not being recognized by react-redux while using NextJS with RTK and

Struggling to integrate Redux RTK into my Next JS 13.4 app has been quite the challenge. No matter how many tutorials I follow, I keep encountering the same error in my provider.ts file. 'use client' import { store } from './store'; imp ...

What methods are available to extract HTML elements from .ts files?

Exploring Angular development has been quite a challenge for me. I've heard that typescript is an extension of javascript, but when it comes to manipulating HTML elements in the .ts file, I seem to be at a loss. I attempted a simple document.getEleme ...

Managing dependencies and automating setup processes can be tricky when incorporating Typescript into a

Query: How can I easily set up Typescript with Symfony without making extensive changes to Symphony's configuration files? Here are the key requirements for the solution: Typescript MVC Pattern should be set up in a private typescript directory: ...

Tips for preventing NPM EACCES: access denied error?

Whenever I try to run the command npm i -g npm, I keep encountering a plethora of errors, including: EACCES: permission denied and checkPermissions The suggested solution is: Please try running this command again as root/Administrator However, ...