Amplify-js: <Connect> component with pagination?

[wizawuza]

* Which Category is your question related to? *
AppSync react component and Pagination
* What AWS Services are you utilizing? *
AppSync

If my schema is as such:
type Comment @model
{
id: ID!
comment: String!
}

My React/JS code is utilizing a <Connect> component. I've figured out query, subscription, etc. and that works great, including when I add a new Comment, but what about pagination?

If I limit the initial query to 10 record, and I have some function to pull the next bunch of comments via a new query with nextToken, how do I incorporate that into the <Connect> component?

[wizawuza]

Never mind, I ended up extending the <Connect> component and modifying its state after doing a new GraphQL request. That got me what I wanted and was pretty easy to do.

Hopefully this will be helpful for anyone else looking to do the same.. I'll close this now.

[lookitsatravis]

@wizawuza Would you mind sharing your solution?

[wizawuza]

import { Connect } from "aws-amplify-react";
import { API, graphqlOperation } from 'aws-amplify';

class ConnectCustom extends Connect {
  // useful for pagination within the Connect component
  getMoreData = async (query, queryName, filter, limit=null) => {
    let nextToken = this.state.data[queryName].nextToken;
    if(nextToken !== null) {
      const chatData = await API.graphql(graphqlOperation(query, { nextToken: nextToken, limit: limit, filter: filter } ));
      let updatedStateData = Object.assign({}, this.state.data);
      updatedStateData[queryName].items = updatedStateData[queryName].items.concat(chatData.data[queryName].items);
      updatedStateData[queryName].nextToken = chatData.data[queryName].nextToken;
      this.setState({
        data: updatedStateData,
      })
    }
  }
}

export default ConnectCustom ;

is called from:

<ConnectCustom query={graphqlOperation(queries.listPosts,{ limit: postsPerPull } )}
          ref={(connect) => { this._connect = connect; }}
        >

The ref prop above is useful so that whatever function does the next fetch (e.g., an "onClick" button that says "pull more data!") has the following code:

      this._connect.getMoreData(queries.listPosts, "listPosts", filter, postsPerPull );

There may be a more elegant way to do send the argument "listPosts" to the getMoreData function, but that works for me.

Basically it's modifying the internal state of the component ConnectCustom to add items to state.listPosts.items, which should then automatically update on your screen with the magic of React State.

I hope the above example works well for you.. I tried to strip out my "secret sauce" that's not relevant to your question.