use-relay-pagination

This is a React hook library to assist with GraphQL Relay pagination. The library provides a useRelayPagination hook that can be used to retrieve pagination parameters such as first, last, after, and before.

Installation

This library is designed to be used in a Next.js application. To install the library, simply run the following command:

yarn add use-relay-pagination

Usage

To use the useRelayPagination hook, import it into your component and call it like any other React hook:

import { useRelayPagination } from 'use-relay-pagination';

function MyComponent() {
  const { first, last, after, before } = useRelayPagination(10);

  // ...
}

The useRelayPagination hook accepts a single argument, which is the number of items to display per page (default is 20).

The hook returns an object containing the following properties:

• first: The number of items to fetch from the beginning of the list.
• last: The number of items to fetch from the end of the list.
• after: The Relay cursor for the item after which to start fetching.
• before: The Relay cursor for the item before which to start fetching.

These properties can then be used to construct your GraphQL query for pagination.

Examples

query MyQuery($first: Int, $last: Int, $after: String, $before: String) {
  items(first: $first, last: $last, after: $after, before: $before) {
    edges {
      node {
        id
        name
      }
      cursor
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
  }
}

Here's an example of how you might use the useRelayPagination hook in your component:

import { useRelayPagination } from 'use-relay-pagination';
import { useQuery } from 'react-query';
import { MyQuery } from './MyQuery';

function MyComponent() {
  const { first, last, after, before } = useRelayPagination(10);

  const { data, isLoading, isError } = useQuery(['myQuery', { first, last, after, before }], () =>
    fetch('/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: MyQuery,
        variables: { first, last, after, before },
      }),
    }).then((res) => res.json())
  );

  // ...
}

In this example, we use the useQuery hook from react-query to fetch data from our GraphQL server. We pass in an array as the first argument to useQuery, which contains the query key and variables. The fetch call inside the useQuery hook is then used to fetch the data from the server. We pass in the MyQuery and variables to the body of the request.

The isLoading and isError properties of the useQuery hook can be used to display loading and error states in your component.

Development

1. Clone this repository
2. Install dependencies using yarn install
3. Build the module using yarn build
4. Start development server using yarn dev

📑 License

This package is licensed under the MIT License

Notes

README proudly generated by ChatGPT :robot:

To do

• [ ] Add tests & CI
• [ ] Support other router frameworks (outside Next.js)
• [ ] Release bot