The Road to GraphQL by Robin Wieruch

Author:Robin Wieruch
Language: eng
Format: epub
Publisher: leanpub.com
Published: 2019-04-04T16:00:00+00:00

The pagination feature is complete now, and you are fetching successive pages of an initial page, then merging the results in Apollo Client’s cache. In addition, you show your user feedback about pending requests for either the initial request or further page requests.

Now we’ll take it a step further, making the button used to fetch more repositories reusable. Let me explain why this would be a neat abstraction. In an upcoming section, you have another list field that could potentially implement the pagination feature. There, you have to introduce the More button, which could be nearly identical to the More button you have in the RepositoryList component. Having only one button in a UI would be a satisfying abstraction, but this abstraction wouldn’t work in a real-world coding scenario. You would have to introduce a second list field first, implement the pagination feature for it, and then consider an abstraction for the More button. For the sake of the tutorial, we implement this abstraction for the pagination feature only in this section, though you should be aware this is a premature optimization put in place for you to learn it.

For another way, imagine you wanted to extract the functionality of the More button into a FetchMore component. The most important thing you would need is the fetchMore() function from the query result. The fetchMore() function takes an object to pass in the necessary variables and updateQuery information as a configuration. While the former is used to define the next page by its cursor, the latter is used to define how the results should be merged in the local state. These are the three essential parts: fetchMore, variables, and updateQuery. You may also want to shield away the conditional renderings in the FetchMore component, which happens because of the loading or hasNextPage booleans. Et voilà ! That’s how you get the interface to your FetchMore abstraction component.

src/Repository/RepositoryList/index.js import React, { Fragment } from 'react'; import FetchMore from '../../FetchMore'; import RepositoryItem from '../RepositoryItem'; ... const RepositoryList = ({ repositories, loading, fetchMore }) => ( <Fragment> {repositories.edges.map(({ node }) => ( <div key={node.id} className="RepositoryItem"> <RepositoryItem {...node} /> </div> ))} <FetchMore loading={loading} hasNextPage={repositories.pageInfo.hasNextPage} variables={{ cursor: repositories.pageInfo.endCursor, }} updateQuery={updateQuery} fetchMore={fetchMore} > Repositories </FetchMore> </Fragment> ); export default RepositoryList;

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.