Create Pagination Container

createPaginationContainer.js

export default createPaginationContainer(LinkList,
  {
    viewer: graphql`
      fragment LinkList_viewer on Viewer {
        allLinks(
          filter: $filter,
          first: $count,
          after: $after,
          orderBy: createdAt_DESC
        ) @connection(key: "LinkList_allLinks") {
          edges {
            node {
              ...Link_link
            }
          }
          pageInfo {
            hasNextPage
            endCursor
          }
        }
      }
    `
  },
  {
    direction: 'forward', // forward or backward
    query: graphql` 
      query LinkListForwardQuery(
        $count: Int!,
        $after: String,
        $filter: LinkFilter,
      ) {
        viewer {
          ...LinkList_viewer
        }
      }
    `, // this query is called by the loadMore provied by relay.
    getConnectionFromProps(props) { // the objective is to indicate to relay which connection to paginate through, only
      // relevant when you have multiple connections on the same query/compponent.
      return props.viewer && props.viewer.allLinks;
    },
    getFragmentVariables(previousVariables, totalCount) {
      // this defines the variables passed to the first query.
      return {
        ...previousVariables,
        count: totalCount,
      }
    },
    getVariables(props, paginationInfo, fragmentVariables) {
      // this defines the variables passed to the refetched 'second query'.
      return {
        count: paginationInfo.count,
        after: paginationInfo.cursor,
      }
    },
   }
)