Grid: Server side paging with GraphQL

[MStapelfeldt]

Hi there, I'm using GraphQL to get the Data from the Database in an other Docker Container. This was pretty straight forward and worked out of the box really good. This is the function to get a list of menu Items (to show and edit):

        private async Task<GridDataProviderResult<MenuItem>> MenuItemDataProvider(GridDataProviderRequest<MenuItem> request)
        {
            string sortString = "";
            SortDirection sortDirection = SortDirection.None;

            if (request.Sorting is not null && request.Sorting.Any())
            {
                // Note: Multi column sorting is not supported at this moment
                sortString = request.Sorting.FirstOrDefault()!.SortString;
                sortDirection = request.Sorting.FirstOrDefault()!.SortDirection;
            }
            var result = await getMenuItemList(request);
            _allMenuItems.Clear();
            foreach (var x in result.Edges!)
            {
                _allMenuItems.Add(new MenuItem
                {
                    ID = x.Node.Id,
                    MenuID = x.Node.MenuID,
                    LinkText = x.Node.LinkText,
                    ParentID = x.Node.ParentID,
                });
            }
            return await Task.FromResult(new GridDataProviderResult<MenuItem> { Data = _allMenuItems, TotalCount = result.TotalCount });
        }

        private async Task<IGetPaginatedMenuItems_PaginatedMenuItems> getMenuItemList(GridDataProviderRequest<MenuItem> request)
        {
            IOperationResult<IGetPaginatedMenuItemsResult> menuItem;
            if (request.Filters.Count() == 0)
            {
                menuItem = await BackofficeGraphQL!.GetPaginatedMenuItems.ExecuteAsync(request.PageSize, new() { Id = new() { Neq = 0 } });
            }
            else
            {
                MenuItemFilterInput menuItemFilter;
                if (request.Filters.Count() == 1)
                {
                    menuItemFilter = getFilterList(request.Filters).First();
                }
                else
                {
                    menuItemFilter = new()
                    {
                        And = getFilterList(request.Filters).ToArray()
                    };
                }
                menuItem = await BackofficeGraphQL!.GetPaginatedMenuItems.ExecuteAsync(request.PageSize, menuItemFilter);
            }
            return menuItem.Data!.PaginatedMenuItems!;
        }

        private List<MenuItemFilterInput> getFilterList(IEnumerable<FilterItem> filters)
        {
            List<MenuItemFilterInput> joinedFilter = [];
            List<MenuItemFilterInput> menuItemFilter = [];
            List<MenuItemFilterInput> nameFilterList = [];

            filters.ToList().ForEach(filter =>
            {
                var filterItem = filter as FilterItem;
                if (filterItem != null)
                {
                    switch (filterItem.PropertyName)
                    {
                        case "Name":
                            MenuItemFilterInput fName = new()
                            {
                                LinkText = new()
                                {
                                    Contains = filterItem.Value
                                }
                            };
                            break;

                        default:
                            break;
                    }
                }
            });

            if (nameFilterList.Count > 0)
            {
                joinedFilter.Add(new()
                {
                    Or = nameFilterList.ToArray()
                });
            }
            return joinedFilter;
        }

And this is the GraphQL Query:

  paginatedMenuItems(
    first: 25
    where: $filterInput
    after: null
    last: null
    before: null
  ) {
    edges {
      node {
        id
        menuID
        parentID
        linkText
      }
      cursor
    }
    pageInfo {
      startCursor
      endCursor
      hasNextPage
      hasPreviousPage
    }
    totalCount
  }
}

It is using the default GraphQL [UsePaging(IncludeTotalCount = true, DefaultPageSize = 25)][UseFiltering][UseSorting] attributes.

But now I struggle to get paging working. The Result structure is (simplified to 4 Items):

{
  "data": {
    "paginatedOldMenuItems": {
      "edges": [
        {
          "node": {
            "id": 1,
            "menuID": 1,
            "parentID": null,
            "linkText": "Personal"
          },
          "cursor": "MA=="
        },
        {
          "node": {
            "id": 3,
            "menuID": 3,
            "parentID": null,
            "linkText": "Controlling"
          },
          "cursor": "MQ=="
        },
...................
        {
          "node": {
            "id": 52,
            "menuID": 52,
            "parentID": 14,
            "linkText": "Projekte"
          },
          "cursor": "MjQ="
        }
      ],
      "pageInfo": {
        "startCursor": "MA==",
        "endCursor": "MjQ=",
        "hasNextPage": true,
        "hasPreviousPage": false
      },
      "totalCount": 85
    }
  }
}

How to submit the start and end cursor when clicking on Next or Page 3?

Thank you a lot for your help!