Proper data fetching and pagination

[danielbettech]

Hello,

I am trying to render a collections page in my hydrogen app.
I can't figure out how to do the complete implementation to get it to work with pagination. I don't know how to send data the selected cursor back to the server component and do the re-fetch.

Cursor based pagination

This is my code to fetch the first 15 collections

/src/routes/collections/index.jsx

import {
  gql,
  useShopQuery,
  CacheLong,
} from '@shopify/hydrogen'
import { Layout } from '../../components/Layout.server'
import { Suspense } from 'react'
import { CollectionsPage } from '../../components/CollectionsPage.client'

export default function Collections() {
  const {
    data: { collections },
  } = useShopQuery({
    query: QUERY,
    variables: {
      cursor:
        'example-cursor-value-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    },
    cache: CacheLong(),
  })

  return (
    <Layout>
      <Suspense><Seo type='collection' data={collections} /></Suspense>
      <div className='grid lg:grid-cols-4'>
        <CollectionsPage
          collections={collections}
        />
        <div className='col-span-3 w-full'></div>
      </div>
    </Layout>
  )
}

const QUERY = gql`
  query Collections($cursor: String!) {
    collections(first: 15, after: $cursor) {
      edges {
        cursor
        node {
          id
          title
        }
      }
      pageInfo {
        startCursor
        endCursor
      }
    }
  }
`

/src/components/CollectionsPage.client.jsx

export function CollectionsPage({ collections }) {
  return (
    <section>
      <button onClick={() => {}}></button>
      <pre>{JSON.stringify({ collections }, null, 2)}</pre>
    </section>
  )
}

1. I had to define a hard coded cursor, so the first render the app don't crash. I don't want to pass a cursor value (in the useShopQuery hook) the first time the component renders, only need the "first" parameter. And when next-page button is clicked, then obtain the end cursor and send it to the server to refetch the new data.
2. Once I have the data and pass it to the client component, how can I trigger a function based on a click, send the endCursor to the server component again, do the refetch and receive them as props in the client component.
3. Should I need to do this data fetching from the client side?

Any help on how this needs to be done, is appreciated.