Relay-style cursor pagination?

[nimmolo]

Hi - thank you for all of this work.

In my project, i am querying the items from a GraphQL server, and the server returns the results using "Relay-style" cursor-based pagination. The cursor is a long unique string, not a number. There are no "page numbers" in this style of pagination, it just refers to the keys for startCursor and endCursor of each next group of items returned (each page, in other words).

Reading through the IG API it seems the items are indexed by a numerical key , and number offset groupKey. I'm wondering if IG can work with cursor-based pagination.

Or maybe, onRequestAppend i can handle my query separately using my own fetch function, and just append the new items to IG. Do i need to add a numerical itemBy and groupBy when i append items?... or, how should i handle it if my cursors are not numerical?

Sorry, i'm just getting my head around how IG works. Please let me know if I'm missing something :)

[nimmolo]

@daybrush Is there a way to use IG with Relay cursors?

[daybrush]

@nimmolo

Can I understand that groupKey cannot be set because there is no page number?

If so, there seem to be two ways.

1. Set all groupKeys to be the same.
2. Add the following (groupKey + 1) through the groupKey attribute of onRequestAppend.

[nimmolo]

Thanks @daybrush 감사 해요 Yes that is the issue. I am now trying with groupKeys all same, or adding +1. (having a new issue, i will raise in a different thread, but...) Does it matter if the item.key is also not numeric?
The cursor (that I would use for item.key) is unique but it is a string, like this: MjAyMS0xMS0wNC80NTUwOTM

My Relay items (edges) are an array of objects like this, i'm sure you have seen before.
For each edge the cursor is the key for the item (not the id), and the node is the item graphQL data used in the layout.

{
  "__typename": "ObservationEdge",
  "cursor": "MjAyMS0xMS0wNC80NTUwOTM",
  "node": {
    "__typename": "Observation",
    "id": 455093,
    "createdAt": "2021-11-05T00:11:14-04:00",
    "updatedAt": "2021-11-05T00:11:22-04:00",
    "when": "2021-11-04",
    "where": "Chumash Interpretive Center, Thousand Oaks, Ventura Co., California, USA",
    "imgSrcThumb": "/images/thumb/1334494.jpg",
    "imgSrcSm": "/images/320/1334494.jpg",
    "imgSrcMed": "/images/640/1334494.jpg",
    "thumbImage": {
      "__typename": "Image",
      "width": 2448,
      "height": 2448
    },
    "name": {
      "__typename": "Name",
      "formatName": "<b><i>Xanthagaricus caeruleus</i></b>",
      "author": "Iqbal Hosen, T.H. Li & Z.P. Song"
    },
    "user": {
      "__typename": "User",
      "name": "Nathan W",
      "login": "nathan"
    },
    "rssLog": {
      "__typename": "RssLog",
      "detail": "Fungarium record added by nathan: <i>13465</i> &#64; Nathan W (nathan): Personal Herbarium"
    }
  }
}

[daybrush]

@nimmolo

Yes. Because react child key is used, both string and number are allowed as long as it is unique.

[nimmolo]

Thanks I understand. I will test and mark answered as soon as i get it working!

[nimmolo]

@daybrush - I'm passing my array of items toMasonryInfiniteGrid, but it's not calculating any visibleItems. I'm getting an empty array.

1. Maybe the problem is item height is not getting calculated? My items do not have defined height - they are a mix of HTML and image, like a bootstrap "card". But I imagine this is common use for InfiniteGrid.

2. Alternatively, maybe my items array does not have the necessary structure for IG. I have a question below about how to pass the cursor (as key?), or if i am otherwise implementing incorrectly.

3. $observations is a Svelte reactive variable that updates when the query fetches more results. I want to make newItems a reactive variable ($newItems) that updates with new items, but it's not accepted inside <MasonryInfiniteGrid>. I have to use newItems (without the $).

Svelte file

Here's <MasonryInfiniteGrid> in my Svelte file. GetObservations is a query to get the items from a GraphQL API.

<script lang="ts">
  import { GetObservations } from '$lib/generated';
  import { onMount } from 'svelte';
  let filter;

  $: observations = GetObservations({ variables: filter });

  import Item from '$lib/components/observation/Item.svelte';

  import { MasonryInfiniteGrid } from '@egjs/svelte-infinitegrid';
  import { tick } from 'svelte';

  $: pageInfo = $observations.data?.observations?.pageInfo;
  let items = [];
  $: newItems = $observations.data?.observations?.edges;
  let ig;

  onMount(() => {
     console.log(ig.getItems());
   });

  function handleNext() {
    if (pageInfo) {
      $observations.query.fetchMore({
        variables: {
          filter: filter,
          after: pageInfo.endCursor
        }
      });
    }
  }
</script>

{#if $observations.loading}
  Loading...
{:else if $observations.error}
  {$observations.error}
{:else if $observations.data}
  {(items=newItems)}
  <MasonryInfiniteGrid
    class="grid ig"
    useLoading={true}
    gap={5}
    {items}
    on:requestAppend={({ detail: e }) => {
      e.wait();
      handleNext();
      e.ready();
      if (newItems.length && pageInfo.hasPreviousPage) {
        items = [...items, ...newItems];
      }
    }}
    let:visibleItems
  >
    {@debug items} <!-- array has items -->
    {@debug visibleItems} <!-- empty array -->
      {#each visibleItems as edge (edge.key) //should this be edge.cursor?} 
        <Item {edge} />
      {/each}
  </MasonryInfiniteGrid>
{/if}

<style>
  :global(.ig) {
    height: 600px;
  }
</style>

Am I passing react child key (edge.key) in each block correctly? Anything else seem not ok?

items (from dev tools)

Here is an example items array from the first query:

Object { items: (24) […] }
items: Array(24) [ {…}, {…}, {…}, … ]
0: Object { __typename: "ObservationEdge", cursor: "MjAyMS0xMS0wNC80NTUwOTM", node: {…} }
1: Object { __typename: "ObservationEdge", cursor: "MjAyMS0wNi0xMy80NTUwOTI", node: {…} }
2: Object { __typename: "ObservationEdge", cursor: "MjAyMS0wNi0xMy80NTUwOTA", node: {…} }
3: Object { __typename: "ObservationEdge", cursor: "MjAyMS0wNi0xMy80NTUwODU", node: {…} }
...
length: 24
<prototype>: Array []
<prototype>: Object { … }

The cursor in each item is the unique identifier for the item in the query, and the node in each item has the data that gets sent to the Item component, as in comment above.

visibleItems (from dev tools)

Even with items array populated, visibleItems is empty

Object { visibleItems: [] }

[daybrush]

@nimmolo

In the first rendering, visibleItems may not be visible.
Set useFirstRender to true if you want it to be visible in the first render.

[daybrush]

@nimmolo

And add this property:

itemBy={item => item.cursor}

[nimmolo]

Thanks @daybrush !!
I now have visibleItems, same as items initially.

Edit: It's mostly working!! At least, rendering first 24 items. Will troubleshoot more tomorrow
THANK YOU!!! 🎉🖖💪🤜🤛🥳