📘
Slickgrid-React
Live DemoGitHub
  • Introduction
  • Getting Started
    • Quick start
  • Styling
    • Dark Mode
    • Styling CSS/SASS/Themes
  • Column Functionalities
    • Cell Menu (Action Menu)
    • Editors
      • Autocomplete
      • new Date Picker (vanilla-calendar)
      • LongText (textarea)
      • Select Dropdown Editor (single/multiple)
    • Filters
      • Autocomplete
      • Input Filter (default)
      • Select Filter (dropdown)
      • Compound Filters
      • Range Filters
      • Custom Filter
      • Styling Filled Filters
      • Single Search Filter
    • Formatters
    • Sorting
  • Events
    • Available events
    • On Events
  • Slick Grid/DataView Objects
    • Slick Grid/DataView Objects
  • Grid Functionalities
    • Auto-Resize / Resizer Service
    • Resize by Cell Content
    • Column Picker
    • Composite Editor Modal
    • Custom Tooltip
    • Add, Update or Highlight a Datagrid Item
    • Dynamically Add CSS Classes to Item Rows
    • Column & Row Spanning
    • Context Menu
    • Custom Footer
    • Excel Copy Buffer Plugin
    • Export to Excel
    • Export to File (csv/txt)
    • Grid Menu
    • Grid State & Presets
    • Grouping & Aggregators
    • Header & Footer Slots
    • Header Menu & Header Buttons
    • Infinite Scroll
    • Pinning (frozen) of Columns/Rows
    • Providing data to the grid
    • Row Detail
    • Row Selection
    • Tree Data Grid
    • Row Based Editing Plugin
  • Developer Guides
    • CSP Compliance
  • Localization
    • with I18N
    • with Custom Locales
  • Backend Services
    • Custom Backend Service
    • OData
    • GraphQL
      • JSON Result Structure
      • Filtering Schema
      • Pagination Schema
      • Sorting Schema
  • Testing
    • Testing Patterns
  • Migrations
    • Migration Guide to 3.x (2023-05-29)
    • Migration Guide to 4.x (2023-12-15)
    • Migration Guide to 5.x (2024-05-10)
    • Versions 6 to 8 are skipped...
    • Migration Guide to 9.x (2025-05-10)
Powered by GitBook
On this page
Edit on GitHub
  1. Backend Services
  2. GraphQL

JSON Result Structure

The GraphQL JSON result will always follow a certain structure where only the dataset name and the nodes array will change. With that in mind, if we look at the GraphqlResult TypeScript interface, the JSON result will mostly follow this structure (except when Pagination is disabled if so continue reading):

GraphqlResult TypeScript interface

The datasetName is the only dynamic portion of the structure and in our demo will be users.

with Pagination

export interface GraphqlPaginatedResult {
  data: {
    [datasetName: string]: {
      /** result set of data objects (array of data) */
      nodes: any[];

      /** Total count of items in the table (needed for the Pagination to work) */
      totalCount: number; 
    }
  };

  /** Some metrics of the last executed query (startTime, endTime, executionTime, itemCount, totalItemCount) */
  metrics?: Metrics;
}

without Pagination

export interface GraphqlResult {
  data: {
    [datasetName: string]: any[];
  };

  /** Some metrics of the last executed query (startTime, endTime, executionTime, itemCount, totalItemCount) */
  metrics?: Metrics;
}

ResultSet

Users demo (with Pagination)

If we consider that we defined a grid of Users and we provided the datasetName: 'users' with 3 defined columns (firstName, lastName, email), note that id will always be included as it is a requirement from SlickGrid itself and it must be unique ids. The JSON result could look like the following:

{
  "data": {
    "users": {
      "totalCount": 2,
      "nodes": [
        {
          "id": 0,
          "firstName": "John",
          "lastName": "Doe",
          "email": "john@doe.com"
        },
        {
          "id": 1,
          "firstName": "Jane",
          "lastName": "Doe",
          "email": "john@doe.com"
        }
      ]
    }
  }
}

Users demo (without Pagination)

{
  "data": {
    "users": [
      {
        "id": 0,
        "firstName": "John",
        "lastName": "Doe",
        "email": "john@doe.com"
      },
      {
        "id": 1,
        "firstName": "Jane",
        "lastName": "Doe",
        "email": "john@doe.com"
      }
    ]
  }
}
PreviousGraphQLNextFiltering Schema

Last updated 23 days ago